Question

我在我的网站上使用knockoutjs进行表单验证。

问题是我更喜欢将动态数据发送到页面，而不是用ajax加载它（如果我已经发送了一个额外的请求，我认为没有意义关于html的数据。）

问题是我必须在服务器发送的页面上“反向工程”内容，以填充我的knockoutjs模型。我这样做（模型是用户，我有一个html表，页面上有我的所有用户）：

// Handler to prepopulate my viewmodel (list of users) with data from the page
ko.bindingHandlers.populateUsersFromTable = {
    init:function (element, valueAcessor, allBindingsAccessor, viewModel) {
        var collection = valueAcessor(),
            tableRows = $(element).find("tbody > tr"),
            numberOfRows = tableRows.length,
            tableCells,
            user,
            i;

        for (i = 0; i < numberOfRows; i++) {
            tableCells = $(tableRows[i]).children("td");
            user = new User({
                name:$(tableCells).find(".user-name").text(),
                email:$(tableCells).find(".user-email").text(),
                clt_pj:$(tableCells).find(".user-clt_pj").text(),
                admin:$(tableCells).find(".user-admin").text(),
                blacklisted:$(tableCells).find(".user-blacklisted").text(),
                fired:$(tableCells).find(".user-fired").text()
            });
            collection.push(user);
        }
    }
}

// User Model/ViewModel
function User(u) {
    var self = this;
    // data
    self.name = ko.observable(u.name || '');
    self.email = ko.observable(u.email || '');
    self.clt_pj = ko.observable(u.clt_pj || '');
    self.admin = ko.observable(u.admin || false);
    self.blacklisted = ko.observable(u.blacklisted || false);
    self.fired = ko.observable(u.fired || false);

    // view
    self.selected = ko.observable(false);
}

它有效，但我不认为这是一个很好的解决方案，因为代码依赖于UI。

这样做的更好方法是什么？

Answer 1

标准方法是让服务器在页面上填充HTML，而不是让服务器将模型转换为随页面一起发送的JSON。它仍然存在于原始请求中，并且在很多情况下它实际上更小，因为JSON是一种非常紧凑的格式（对于大select列表尤其如此）。

例如，如果您使用ASP.MVC，您可以将它放在视图的底部（任何服务器技术都允许您这样做，如果您使用其他东西只是让我知道，我会添加相反的例子）：

var initialData = @Html.Raw(Json.Encode(Model));

然后使用该数据初始化您的viewmodel，如下所示：

ko.applyBindings(new ViewModel(initialData));

然后，淘汰赛将通过绑定来处理HTML。

使用knockoutjs与服务器发送数据已经页面

1 个答案: