1

我基本上在我的网站上使用 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。

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

4

1 回答 1

3

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

例如，如果您使用的是 ASP.MVC，则可以将其放在视图的底部（任何服务器技术都允许您这样做，如果您使用其他东西，请告诉我，我将添加该示例代替):

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

然后稍后使用该数据来初始化您的视图模型，如下所示：

ko.applyBindings(new ViewModel(initialData));

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

于 2012-11-22T21:18:54.337 回答