Javascript 当我单击使用observableArray显示的href标记时，UI不会刷新_Javascript_Knockout.js

Javascript 当我单击使用observableArray显示的href标记时，UI不会刷新

javascript knockout.js

Javascript 当我单击使用observableArray显示的href标记时，UI不会刷新,javascript,knockout.js,Javascript,Knockout.js,我的问题是，当我单击使用ObservalArray显示的href标记时，它不会刷新我的UI。我必须使用列表控件我有一个列表控件，显示6个文件夹，然后是一个表，显示同样的6个文件夹和6个href标记。当我在listbox控件中更改选择时，文件会被刷新，非常容易和顺利。但是，我想/需要使用href标记刷新这些文件。如果有人有任何答案，请告诉我我从以下位置获取了示例中的大部分代码： Java脚本文件“proto.js”： var文件夹=[ {name:“文件夹3”，文件名：[“文件3\u 1”，

我的问题是，当我单击使用ObservalArray显示的href标记时，它不会刷新我的UI。我必须使用列表控件

我有一个列表控件，显示6个文件夹，然后是一个表，显示同样的6个文件夹和6个href标记。当我在listbox控件中更改选择时，文件会被刷新，非常容易和顺利。但是，我想/需要使用href标记刷新这些文件。如果有人有任何答案，请告诉我

我从以下位置获取了示例中的大部分代码：

Java脚本文件“proto.js”：

var文件夹=[
{name:“文件夹3”，文件名：[“文件3\u 1”，“文件3\u 2”，“文件3\u 3']}，
{name:“文件夹4”，文件名：[“文件4_1”，“文件4_4”，“文件4_2”，“文件4_3']，
{name:“文件夹5”，文件名：[“文件5_1”，“文件5_4”，“文件5_5”，“文件5_2”，“文件5_3']，
{name:“文件夹6”，文件名：[“文件6_1”，“文件6_4”，“文件6_6”，“文件6_5”，“文件6_2”，“文件6_3']，
{name:“文件夹2”，文件名：['File 2_2'，'File 2_1']}，
{name:“文件夹1”，文件名：['File 1_1']}
];
var FileExplorerViewModel=函数（列表，selectedList）{
this.folders=ko.observearray（列表）；
this.editingList={
名称：ko.observable（selectedList），
文件名：ko.observearray（）
};
this.changeFolder=ko.computed({
读：函数（）{
警报（“更改文件夹：读取”）；
返回此.editingList；
},
写入：函数（文件夹）{
警报（“更改文件夹：写入”）；
警报（文件夹名称）；
if（文件夹&&this.editingList）{
警报（“更改文件夹：写入执行”）；
selectedList=folder.name；
}
},
所有者：此//FileExplorerViewModel
}，这个）；
this.sortFolders=函数（）{
this.folders.sort（函数（a，b）{
返回a.name



HTML文件：“proto.HTML”

文件浏览器原型
对文件夹排序


当前正在查看文件夹中的文件：
排序文件





您的changeFolder在写入时所做的一切都是selectedList=folder.name
，但这不会影响任何其他内容。。我想你可能想做：this.editingList.name（folder.name）
。下面是它的工作原理：
这是可行的，但只要稍作修改就可以简单得多。不要以当前正在工作的文件夹的名称为基础，而要以文件夹本身为基础。您应该很少需要使用选项value
绑定，因为使用它意味着覆盖默认功能，即KO将每个选项映射到实际对象，并使用实际对象标识作为“值”。我还将computed更改为simple subscribe，并简化了changeFolder
函数-它没有理由是可写的computed。更新的小提琴：感谢您的建议和示例，Antishok。我看到并测试了您在JSFIDLE中创建的示例，这非常有用。它正按照我需要的方式工作。
    var folders = [
    { name: "Folder 3", fileNames: ['File 3_1', 'File 3_2', 'File 3_3']},
    { name: "Folder 4", fileNames: ['File 4_1', 'File 4_4', 'File 4_2', 'File 4_3'] },
    { name: "Folder 5", fileNames: ['File 5_1', 'File 5_4', 'File 5_5', 'File 5_2', 'File 5_3'] },
    { name: "Folder 6", fileNames: ['File 6_1', 'File 6_4', 'File 6_6', 'File 6_5', 'File 6_2', 'File 6_3'] },
    { name: "Folder 2", fileNames: ['File 2_2', 'File 2_1'] },
    { name: "Folder 1", fileNames: ['File 1_1'] }
];

var FileExplorerViewModel = function (lists, selectedList) {
    this.folders = ko.observableArray(lists);

    this.editingList = {
        name: ko.observable(selectedList),
        fileNames: ko.observableArray()
    };

    this.changeFolder = ko.computed({
        read: function () {
            alert("changeFolder: Read");
            return this.editingList;
        },
        write: function (folder) {
            alert("changeFolder: write");
            alert(folder.name);
            if (folder && this.editingList) {
                alert("changeFolder: Write executing");
                selectedList = folder.name;
            }
        },
        owner: this //FileExplorerViewModel
    }, this);

    this.sortFolders = function () {
        this.folders.sort(function (a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };
    this.sortFiles = function () { 
        this.editingList.fileNames.sort(function (a, b) { 
            return a < b ? -1 : 1; 
        }); 
    };

    this.findSavedList = function (name) {
        var lists = this.folders();
        return ko.utils.arrayFirst(lists, function (list) {
            return list.name === name;
        });
    };

    ko.computed(function () {
        //alert("ko.computed");
        // Observe viewModel.editingList.name(), so when it changes (i.e., user selects a different list) we know to copy the saved list into the editing list
        var savedList = this.findSavedList(this.editingList.name());
        if (savedList) {
            var userNamesCopy = savedList.fileNames.slice(0);
            this.editingList.fileNames(userNamesCopy);
        } else {
            this.editingList.fileNames([]);
        }
    }, this);

};

$(document).ready(function () {
    ko.applyBindings(new FileExplorerViewModel(folders, "Folder 4"));
});

<!

DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>File Explorer Prototype</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.css" />
    <script type="text/javascript" src="../cordova-1.6.0.js"></script>
    <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="Proto.js"></script>
</head>
<body class="homeBody">

    <div class='listChooser'>
        <!--<button data-bind='click: deleteList, enable: editingList.name'>Delete</button>
        <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>-->
        <!--<select data-bind='options: folders, optionsValue: "name", value: editingList.name'> </select>-->
        <select multiple="multiple" data-bind="options: folders, optionsValue: 'name', value: editingList.name"></select>
        <button data-bind='click: $root.sortFolders'>Sort Folders</button>
        <table>
            <tbody data-bind="foreach: folders">
                <tr><td>
                    <span data-bind="text: name"></span>
                    <a href="#" data-bind="click: $root.changeFolder">Change</a>&nbsp;&nbsp;&nbsp;
                    <!--<a data-bind="attr: {href: name}, click: $root.changeFolder">Change Folder</a>-->
                    <br />
                    </td></tr>
            </tbody>
        </table>
    </div>

    <p>Currently viewing <b><font color="red"><span data-bind='text: editingList.fileNames().length'></span></font></b> file(s) from folder <b><font color="red"><span data-bind="text: editingList.name"></span></font></b>:</p>
    <button data-bind='click: $root.sortFiles'>Sort Files</button>
    <div data-bind='with: editingList'>
        <ul data-bind='foreach: fileNames'>
            <li>
                <div data-bind="text: $data"> </div>
            </li>
        </ul>
    </div>
</body>
</html>