Question

对JSViews的另一个问题抱歉。我真的很喜欢这个系统，但我偶尔会挣扎。

我有一个简单的模板，只需要更新数组中要显示的选项框更改：

但是，当我更改数据时，＃is; isSelected＆＃34;未使用以下内容更新模板：

即：

function someClickFunction(sel) {
    value = sel.value;
    ....
    la_configure_list[0].isSelected = false;
    $.observable(la_configure_list).refresh(
            la_configure_list.slice(0)
        );
}

如果我将其更改为

$.observable(la_configure_list).refresh(
        JSON.parse(JSON.stringify(la_configure_list))
                       );

它更新得很好。

任何人都可以告诉我我做错了什么：

<script id="la-config-overview-list-template" type="text/x-jsrender">
    {^{if isSelected}}
    <div class="col s12 la_review_list_item" data-index="{{:#index}}">
        <div class="card">
            <div class="card-content" style="padding: 10px;">
                <div class="col s12 m6 l5 xl5">
                    <h6 style="font-weight: 700;" class="">{{:title}}</h6>
                        <div>Categories:</div>
                        <div>
                            {{for categories}}
                            <span class="chip">{{:#data}}</span>
                            {{/for}}
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    {{/if}}

我的HTML是

<div id="teacher_la_review_overview_main_wrapper" class="container body-content">
    <div class="row" style="margin-bottom: 0;"></div>
</div>

数组是：

la_configure_list = [
{
    isSelected:true,
    title: "Title",
    categories: ["1", "2"....]
},
....
]

我设置了模板：

$.templates("#la-config-overview-list-template").link("#la_review_list_overview_list_wrapper .row", la_configure_list);

我尝试使用$ .view（elem）.refresh（），但由于我更新isSelected的点击操作是在模板之外，我找不到正确的＆＃34; elem＆＃34;使用。

编辑 - 添加了实际更新代码：

function CategoryUpdate(sel) {

        var catSelected = sel.value;
        var catText = sel.options[sel.selectedIndex].text;

        if (catSelected !== "-1") {
            for (var cs = 0; cs < la_configure_list.length; cs++) {
                if (la_configure_list[cs].categories == null) {
                    la_configure_list[cs].isSelected = false;
                    continue;
                }
                var categories = la_configure_list[cs].categories;
                var isFound = false;
                for (var c = 0; c < categories.length; c++) {
                    var category = categories[c];
                    if (category === catText) {

                        la_configure_list[cs].isSelected = true;
                        isFound = true;
                    }
                }
                if (!isFound) {
                    la_configure_list[cs].isSelected = false;
                }
            }
        } else {
            for (var x = 0; x < la_configure_list.length; x++) {
                la_configure_list[x].isSelected = true;
            }
        }

        $.observable(la_configure_list).refresh(
            JSON.parse(JSON.stringify(la_configure_list))
        );
    }

Answer 1

您的数组la_configure_list.slice(0)是la_configure_list的浅表副本。可观察数组refresh()方法用于数组更新 - 排序，删除或添加项。它经过优化以避免不必要的更新。实际上，它会分析数组并触发移动，插入和删除它检测到的任何更改的事件。

在您的情况下，虽然您复制了数组，但它是一个浅表副本，因此数组项是相同的，并且顺序保持不变。因此，不会触发任何可观察的数组更改事件。当您使用JSON.parse等时，您将使用克隆副本替换该对象，因此现在refresh()认为已删除所有项目，然后添加新项目。

但是为什么不对isSelected属性可观察对其进行任何更改，如下所示：

function someClickFunction(sel) {
    value = sel.value;
    ...
    $.observable(la_configure_list[index]).propertyChange("isSelected", false);
    ...
}

由于您有可观察的数据链接{^{if isSelected}}，您不需要对数组或视图进行任何额外的刷新...

JSViews可观察数组没有刷新

1 个答案: