当我需要使用绑定重绘 html 时重新绑定淘汰赛 js

Posted

技术标签:

【中文标题】当我需要使用绑定重绘 html 时重新绑定淘汰赛 js【英文标题】:Rebind knockout js when I need to redraw html with bindings 【发布时间】:2013-09-22 10:47:54 【问题描述】:

我有一种情况,我动态构建了一个 div 容器,该容器中的其他 html 元素绑定到我的淘汰视图模型。它可以工作到我在我的淘汰视图模型上调用一个需要重绘整个 div 的方法。重绘淘汰赛后停止工作。

例如:

 calendar += ('<div class="month-nav-container"><div class="nav-prev" data-bind="click:          $root.showPreviousMonthOnPrevMonthBtnClick" ><<<</div><span class="month-name-calendar">' + monthNames[month] + '</span><div class="nav-next" data-bind="click: $root.showNextMonthOnNextMonthBtnClick" >>>></div></div>');

我这样构建我的日历控件当然这只是其中的一部分,但我希望你能得到一般的想法。

我的淘汰视图模型方法:

self.showPreviousMonthOnPrevMonthBtnClick = function () 
    alert("prev");
    var $calendar = $("#calendar");
    $calendar.empty();

    ////// previous month
    if (self.calendarDisplayDate.month == 0) 
        $calendar.calendarWidget( month: 12, year: self.calendarDisplayDate.year - 1 );
     else 
        $calendar.calendarWidget( month: self.calendarDisplayDate.month - 1, year: self.calendarDisplayDate.year);            
    


在我的页面加载时,我构建了我的日历 div,然后我将 ko.applyBindings() 调用到我的视图模型中并且它可以工作。但是当我点击调用我上个月方法的 btn 需要根据正确的月份重新绘制日历时,淘汰赛停止工作。我重绘了包含所有淘汰赛绑定的整个父 div。有谁知道我的问题的解决方案。我需要重新绘制内部具有 KO 绑定的 div,所以也许我正在寻找的是某种 Knockout 的绑定刷新方法?

【问题讨论】:

在没有重现的情况下回答您的问题有点困难。无论哪种方式,你有一个重绘事物的功能听起来有点狡猾。自定义绑定听起来更像您需要的,这可能会让您的问题完全消失。例如like this. 【参考方案1】:

在这里找到解决方案:

How to clear/remove observable bindings in Knockout.js?

 var element = $('#elementId')[0]; 
 ko.cleanNode(element);

然后

 ko.applyBindings(myVieModel, parentDiv)

【讨论】:

【参考方案2】:

确保所有需要更新的 html 元素都绑定到可观察函数,即 observablefoo 而不是 observablefoo()

【讨论】:

我有这样的,但这不是问题的原因

以上是关于当我需要使用绑定重绘 html 时重新绑定淘汰赛 js的主要内容,如果未能解决你的问题,请参考以下文章

当页面通过ajax作为部分加载时,如何重新绑定淘汰视图模型?

淘汰可见绑定样式显示内联不起作用

Onclick使用淘汰赛js绑定图像

无法绑定淘汰的$ parent

淘汰赛类绑定在组件中不起作用

knockout.js:更新绑定?