当使用knockout.js和Sammy.js时,如何设置内容来自模板的可观察路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当使用knockout.js和Sammy.js时,如何设置内容来自模板的可观察路径相关的知识,希望对你有一定的参考价值。

我正在尝试使用Sammy.js为路由创建单页应用程序。 This是JS:

var galleryTemplateUrl = "templates/galleryTemplate.html";
var registerTemplateUrl = "templates/registerTemplate.html";
var containerId = '#container';
var containerElement = $(containerId);

var app = new Sammy(containerId, function() {
    var self = this;
    self.get('#/Gallery', function() {
        containerElement.html("");
        $.ajax({
            method: "POST",
            url: galleryTemplateUrl
        }).done(function  (result) {
            containerElement.append(result);
            ko.applyBindings(testView(),containerElement[0]);
        })
    });

    self.get('#/Register', function(){
        containerElement.html("");
       $.ajax({
        method: "POST",
        url: registerTemplateUrl
       }).done(function  (result) {

          containerElement.append(result);
       })
    });
});

app.run('#/Gallery');

其余的非常简单。我的HTML中有一个容器div,模板是HTML文件,其中包含一些数据绑定。

问题:一旦我启动应用程序,第一次加载时绑定就会被成功读取,但是如果我改为下一个路由并返回上一个路径,则绑定不再适用。

我想我应该重置ko.applyBinding中的函数,但我不知道如何。

我在尝试创建一个新的AJAX请求之前尝试添加ko.clearNode()但是这样做并没有用。

有任何想法吗?

编辑:我找到了解决问题的方法,但这可能不是“正确”的解决方案。基本上我把我的容器div放在另一个div中。然后,每次我将模板添加到我的容器div时,我将其删除并使用不同的ID重新创建。

编辑:问题的根源似乎是如果cleanNode()用于传递给新Sammy的同一元素,那么cleanNode也将关闭Sammy。基本上不要在Sammy运行的元素上使用cleanNode。

答案

我建议您使用Knockout来管理DOM。这可能意味着为每个路由页面制作一个component(或者可能只是一个template),并让路由器激活相应的路由器。

This answer可能会有所帮助。

以上是关于当使用knockout.js和Sammy.js时,如何设置内容来自模板的可观察路径的主要内容,如果未能解决你的问题,请参考以下文章

使用 knockout.js 将 Flash 新项目添加到 dom 中的数组

在 Knockout.js 中单击按钮时检查选择控件是不是具有值

Knockout JS 增加去除修改绑定

使用 Knockout.js 在表单输入上切换按钮状态

图像加载后在 Knockout.js 中淡入容器元素

knockout.js 虚拟模板绑定