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>

此if绑定导致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());

Knockout.js和绑定onclick的映射

1 个答案: