0

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

我在对话框中有这个 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 无论如何都可以解决这个问题或以不同的方式做谢谢

4

1 回答 1

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());
于 2013-08-16T23:56:25.257 回答