Question

我已经对此做了一些研究，但我对KO和JQM并不是特别有经验。

显然，需要一些自定义绑定才能让KO与一些JQM控件一起使用。但是，当面对以下问题时，我不确定最佳设计是什么。

我有一个index.html文件，带有单独的data-role="page" div。

由于整个应用程序中存在大量共享逻辑，因此为每个页面设置单独的视图模型并不一定有意义，因此我目前只有一个viewModel对象，我正在调用{ {1}}一次。当然，这会在第一页加载后发生。

问题是JQM不会改变后续页面上的元素，直到用户导航到它们，html在调用点applyBindings时保持不变。初始化自定义绑定时，它们正在处理尚未更改的html。

一个简单的例子（没有粘贴代码）将是Knockoutjs, jquery mobile slider，在JQM创建applyBindings之前调用slider('refresh')。

我知道我可以访问slider事件中更改的html，但问题是有两个相互依赖的事件，自定义绑定的pageinit事件和init页面的事件使用自定义绑定。我不确定最好的方法是什么。

最初的想法：

只需处理每个自定义绑定中的差异，我已经在示例中看到了这种情况，例如：包装调用以刷新JQM使用try ... catch初始化的内容。不确定我喜欢这个。
拆分为单独的html文件。不确定我也喜欢这个，因为有很多常见的数据会影响性能。
将pageinit拆分并将其应用于不同的元素，然后仅对各自viewModel事件的每个页面应用绑定。这需要进行一些重新设计，因为每个页面都需要大多数视图模型。
有没有办法强制JQM提前初始化页面？如果是这样，这会是一个不好的举动吗？
有没有办法控制何时初始化KO自定义绑定？问题在于您正在有效地定制单个页面的自定义绑定。
在Javascript中添加绑定，例如https://groups.google.com/forum/?fromgroups=#!topic/knockoutjs/N33EzQ5nWUU。对此不确定，看起来不太干净。

还有其他建议吗？人们之前如何处理这个问题？

Answer 1

如果它对任何人都有帮助，我尝试使用滑块的选项1（基于Knockoutjs, jquery mobile slider），并使用以下自定义绑定：

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        function setSliderValue(newValue) {
            var slider = $("#" + element.id);
            slider.val(newValue);
            slider.slider('refresh');
            slider.on('change', function () {
                valueAccessor()(slider.val());
            });
        }
        valueAccessor().subscribe(setSliderValue);
    }
};

只有在页面初始化后，还有其他代码可以为我的observable设置所需的初始值，例如

$("#myPage").on('pageinit', function () {
    viewModel.myPage.myObservable(1000);
});

这并不完美，并且当我进一步探索KO + JQM世界时，它无法解决我无疑会遇到的其他控制问题。

编辑：调整上面的内容，还为JQM生成的后退按钮（来自data-add-back-btn="true"）添加了一个绑定，这可能会有所帮助：

ko.bindingHandlers.back = {
    init: function (element, valueAccessor) {
        function setBackBind(boundFunction) {
            $("#" + element.id)[0].children[0].children[0].id = element.id + "-backbutton";            
            $("#" + element.id + "-backbutton").on('click', ko.utils.unwrapObservable(valueAccessor()));
        }
        valueAccessor().subscribe(setBackBind);
    }
};

然后我将后退按钮设置为pageinit上所需的功能，同时设置我的滑块可观察

JQuery Mobile页面分离+ Knockout自定义绑定

1 个答案: