1

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

显然，需要一些自定义绑定才能让 KO 与一些 JQM 控件配合使用。但是，当遇到以下问题时，我不确定最好的设计是什么。

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

由于整个应用程序中有很多共享逻辑，因此为每个页面拥有一个单独的视图模型不一定有意义，所以我目前只有一个viewModel对象，我目前正在调用applyBindings一次。这自然会在第一页加载后发生。

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

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

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

初步想法：

  1. 只需处理每个自定义绑定中的差异，我已经在示例中看到了这一点，例如包装调用以刷新 JQM 使用 try...catch 初始化的内容。不确定我喜欢这个。

  2. 拆分成单独的 html 文件。我也不确定我是否喜欢这个，因为有很多通用数据并且会影响性​​能。

  3. 拆分viewModel并将其应用于不同的元素，然后仅在各自pageinit事件的每个页面上应用绑定。这需要进行一些重新设计，因为每个页面都需要大部分视图模型。

  4. 有什么办法可以强制 JQM 提前初始化一个页面？如果是这样，这会是一个糟糕的举动吗？

  5. 有没有办法控制 KO 自定义绑定何时初始化？问题在于您正在有效地将自定义绑定定制到各个页面。

  6. 在 Javascript 中添加绑定，例如https://groups.google.com/forum/?fromgroups=#!topic/knockoutjs/N33EzQ5nWUU。这个不太清楚，好像不是很干净。

还有其他建议吗？人们以前是如何解决这个问题的？

4

1 回答 1

0

如果它对任何人有帮助，我已经尝试了滑块的选项 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，同时我将滑块设置为可观察

于 2013-01-24T16:31:52.147 回答