【问题标题】:binding new DOM elements to viewmodel after AJAX call在 AJAX 调用后将新的 DOM 元素绑定到视图模型
【发布时间】:2013-02-26 08:52:01
【问题描述】:

我在将新的 DOM 元素绑定到我的视图模型时遇到了麻烦。此元素位于使用 AJAX 调用加载的局部视图中(请参阅下面的 customizeQuote 函数)。

$(function () {
var mvcModel = ko.mapping.fromJS(initialData);

function QuoteViewModel() {
    var self = this;

    self.customizeQuote = function (quote) {
        self.selectedQuote = quote;

        //remove the disable attribute on all form controls before serializing data
        $(".step").each(function () {
            $(this).find('input, select').removeAttr('disabled');
        });

        //convert form data to an object 
        var formData = $('#etape').toObject();

        $.ajax("getSelectedQuote", {
            data: ko.toJSON({ model: self.selectedQuote, model1: formData }),

            type: "post", contentType: "application/json",
            success: function (result) {

                $("#custom").html(result);
                $("#etape").formwizard("show", "customize");
                ko.applyBindings(self.selectedQuote, $("#covers"));

            }
        });
    }
}

var myViewModel = new QuoteViewModel();
var g = ko.mapping.fromJS(myViewModel, mvcModel);    
ko.applyBindings(g);
});

这是部分视图 html:

@model QuoteViewModel
<table id="covers">
<thead>
    <tr>
        <th>
            ProductName
        </th>            
    </tr>
</thead>
<tbody data-bind="foreach: CoverQuotesViewModel">
    <tr>
        <td>
            <input data-bind="value: ProductName" />
        </td>          
    </tr>
</tbody>
</table>

行:

ko.applyBindings(self.selectedQuote, $("#covers"));

触发错误:

“ko.applyBindings:第一个参数应该是你的视图模型;第二个参数应该是一个DOM节点”

我对淘汰赛还很陌生,我看不出我做错了什么。有什么想法吗?

【问题讨论】:

    标签: ajax asp.net-mvc-4 knockout.js viewmodel


    【解决方案1】:

    $("#covers") 虽然不是 DOM 节点,但它是一个 jQuery 对象。也许尝试改用这个:

    ko.applyBindings(self.selectedQuote, $("#covers")[0]);
    

    [0] 将获取 jquery 对象中选择器的第一个匹配元素。

    【讨论】:

    • 没错!感谢您指出这一点,它现在正在工作。
    猜你喜欢
    • 2014-09-24
    • 2013-06-05
    • 2011-09-18
    • 2015-02-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-14
    • 1970-01-01
    相关资源
    最近更新 更多