有没有办法让映射异步填充模型的属性并自动更新视图?

发布于 2025-01-05 22:36:31 字数 1356 浏览 0 评论 0原文

我正在尝试通过 AJAX 加载模型属性的值,但在 AJAX 完成时视图不会更新。

我使用的是淘汰赛 2.0.0 和淘汰赛映射 2.0.3。

jsFiddle:

http://jsfiddle.net/rsfTy/

HTML:

<p>Code: <span data-bind="text: item.code"></span></p>
<p>Value: <span data-bind="text: item.value"></span></p>

JavaScript:

var ViewModel = function () {
    var self = this;

    self.item = ko.mapping.fromJS({ "code": "123" });

    self.load = function () {
        jQuery.ajax({
            "success": function () {
                ko.mapping.fromJS({ "value": "abc" }, {}, self.item);
            },
            "url": "/echo/json"
        });            
    };

    self.load();
};

ko.applyBindings(new ViewModel());

在此示例中,显示了 item.code 的值,因为它是在初始化视图模型时定义的,但是 item.value 的值 从未显示,因为是异步填写的。

我已经尝试过 ko.observable 和 ko.mapping.fromJS 的各种排列,用于属性初始化和更新,但均无济于事。

我想避免 - 如果可能 - 手动初始化所​​有 item 的属性。

我也知道我可以将 ko.applyBindings 移动到 AJAX 调用的 success 内,但我有多个这样的属性,要做到这一点,我必须实现队列系统,这是一种矫枉过正的做法。

我做错了什么?正确的做法是什么?

I'm trying to load the values for a model's property through AJAX, but on AJAX' completion the view is not updated.

I'm using knockout 2.0.0 and knockout mapping 2.0.3.

jsFiddle:

http://jsfiddle.net/rsfTy/

HTML:

<p>Code: <span data-bind="text: item.code"></span></p>
<p>Value: <span data-bind="text: item.value"></span></p>

JavaScript:

var ViewModel = function () {
    var self = this;

    self.item = ko.mapping.fromJS({ "code": "123" });

    self.load = function () {
        jQuery.ajax({
            "success": function () {
                ko.mapping.fromJS({ "value": "abc" }, {}, self.item);
            },
            "url": "/echo/json"
        });            
    };

    self.load();
};

ko.applyBindings(new ViewModel());

In this example the value of item.code is displayed because it's defined when the viewmodel is initialized, but the value of item.value is never shown because is filled in asynchronously.

I've already tried the various permutations of ko.observable and ko.mapping.fromJS, both for property initialization and update, to no avail.

I would like to avoid - if possible - to initialize all the item's properties by hand.

I also know I can move ko.applyBindings inside the success of the AJAX call, but I have more than one property like this and to do it I'd have to implement a queue system, which is an overkill.

What am I doing wrong? What's the correct way do it?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

酒儿 2025-01-12 22:36:31

当您进行初始映射时,将没有可观察到的 UI 绑定的“值”。因此,当您通过映射插件进行更新时,它将创建可观察的“值”,但为时已晚(因为 UI 已经通过绑定)。

如果您像这样初始化它: self.item = ko.mapping.fromJS({ "code": "123", "value": "" }); 那么它将正常工作。

When you do the initial mapping, there will be no "value" observable for the UI to bind against. So, when you do the update via the mapping plugin, it will create the "value" observable, but it is too late (as the UI has already been through binding).

If you initialize it like: self.item = ko.mapping.fromJS({ "code": "123", "value": "" }); then it will work properly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文