使用 KnockoutJs 跟踪初始映射的最佳方法

Question

我发现在我的应用程序中重复了很多以下模式（请参见下面的代码）。 我必须调用 BindMyEvents(true) 进行第一次加载，然后调用 BindMyEvents(false) 进行后续数据检索。

它是延迟加载的，所以我不希望将数据序列化到 HTML 源中。有没有比将布尔标志传递到我的 Bind() 方法更好的方法？是否有通过淘汰赛实现这一目标的标准模式？

我在想我是否应该在视图模型定义中设置 viewAlertsModel.alerts = null，然后让 Bind 函数检查这一点。如果设置为 null 则调用映射方法，然后调用 applyBindings()？

function BindMyEvents(initialMap) {
   // get alerts, map them to UI, then run colorbox on each alert        
        $.getJSON("/Calendar/MyEvents/", {},
            function (data) {

                if ( initialMap ) {
                    // set-up mapping
                    viewAlertsModel.alerts = ko.mapping.fromJS(data);
                    ko.applyBindings(viewAlertsModel,$("#alertedEventsContainer")[0]);     

                } else {
                    // update
                    ko.mapping.fromJS(data, viewAlertsModel.alerts);
                }

            }); 
}

Answer 1

我会为不同的流程重新安排您的代码。

首先 - 定义一次数据。

viewAlertsModel.alerts = ko.observable();

其次，绑定你的数据

ko.applyBindings(viewAlertsModel,$("#alertedEventsContainer")[0]);

第三，现在处理您的数据

 $.getJSON("/Calendar/MyEvents/", {},
        function (data) {
                ko.mapping.fromJS(data, viewAlertsModel.alerts);
         });

第一步和第二步可以在初始化阶段完成。这里的关键是首先将viewAlertsModel.alerts 定义为可观察对象。

第三步是您的运行时代码。现在，您的初始化代码与您的运行时代码完全分离。这更正常的淘汰赛风格。

编辑

关于您的 cmets 关于使用 ko-mapping，我使用以下代码

var tempVar = ko.mapping.fromJS(data);
viewAlertsModel.alerts(tempVar);  // !important - do not use = operator.

这是大多数人使用的约定。您对 ko-mapping 的使用通常用于特殊情况。