Knokout.js和带有绑定onclick的映射

Question

我想这个问题可能会被问好几次，但我找不到任何好的解决方案

我有这个html部分和对话框中的html

<a href="#" title="3" class="button color" id="learnmore">Learn More</a>
     <div id="dialogID" class="learnmore-dialog" title="More Information" style="display:none;">
    <h4 data-bind="text: ProgramName"></h4>
      <strong>Program Objectives</strong>:
        <span data-bind="text: ProgramObjective"></span>
       <strong>Program Speaker</strong>:
       <br><span data-bind="text: Speacker"></span>
       <br>
       <br><strong>Program Locations</strong>:
        <table>
        <tbody data-bind="foreach: displocation">
        <tr>
        <td><span data-bind="text: Address"></span>
        <br><span data-bind="text: LocationName"></span>
        <br><span data-bind="text: City"></span>, <span data-bind="text: State"></span> <span data-bind="text: Zip"></span>
        </td>
         <td>
        <span data-bind="text: ProgramLocationStartDateString"></span>-----<span data-bind="text: ProgramLocationEndDateString"></span>
         </td>
          </tr>
         </tbody></table>
          </div>

我有一个脚本

 <script>
     $("#learnmore").click(function (e) {
       e.preventDefault();
       var winW = $('#main .container').width();
        if (winW > 767)
         winW = winW - 200;
         var prid = $(this).attr("title")
       $.getJSON('http://getjson', function (result) {
          var viewModel = ko.mapping.fromJS(result);
          ko.applyBindings(viewModel);
          })
         $("#dialogID").dialog({
       width: winW,
          modal: true
       });
     });
        </script>

问题是我得到这个错误

不能对同一元素多次应用绑定。

很明显，因为我每次点击按钮都会应用绑定，这样我就可以获得一个新的json。不管怎样，它都可以解决这个问题或以不同的方式进行处理感谢

Answer 1

首先，以这种方式使用jQuery违背了Knockout的思想，但正确使用它可以解决您的问题。

<a data-bind="click: showDialog" href="#" title="3" class="button color" id="learnmore">Learn More</a>

如果绑定导致Knockout不呈现子元素，除非加载了JSON数据，并且with绑定在JSON上下文中生成所有内容。

<div data-bind="if: dialgoStuff().ProgramObjective, with: dialogStuff()" id="dialogID" class="learnmore-dialog" title="More Information" style="display:none;"></div>

然后，您应该为数据创建一个具有可观察对象的ViewModel。

function ViewModel() {
    var self = this;
    self.dialogStuff = ko.observable({});

把你的点击处理程序放在这里。由于您不更改JSON数据的值，除了将其全部替换在一起之外，您不需要映射插件。

    self.showDialog = function (data, e) {
        e.preventDefault();
        var winW = $('#main .container').width();
        if (winW > 767) winW = winW - 200;
        var prid = $(this).attr("title")
        $.getJSON('http://getjson', function (result) {
            self.dialogStuff(result);
        })
        $("#dialogID").dialog({
            width: winW,
            modal: true
        });
    });
}
ko.applyBindings(new ViewModel());