【问题标题】:How to add computed observable to knockoutjs mapping如何将计算的 observable 添加到 knockoutjs 映射
【发布时间】:2012-04-23 23:57:39
【问题描述】:

我正在使用映射插件来创建基于从服务器发送的对象的客户端视图模型。对象是基本地址信息即:address1、address2、city、state、postal等...

绑定视图模型后,如果用户更改地址,我希望谷歌地图画布能够更新。我创建了一个计算的 observable,它检查输入的值并调用地图更新函数。当我不使用映射插件时,我之前有这个工作,即模型是在本地定义的,但是一旦我引入映射,我就无法将计算的 observable 附加到视图模型。

我尝试按照映射插件documentation 的说明进行操作,但计算出的 observable 没有触发更新。我有一个自定义映射,它调用一个包含示例中计算的可观察对象的 mapModel,但没有更新。

有什么想法吗?

$.getJSON("@Url.RouteUrl("
ContactUs_default ", new { action = "
GetPageModel ",  Model.BusinessID})", function(result) {
    //create map property
    result.Data.Map = null;
    var mapping = {
        'Map': {
            create: function(options) {
                return new mapModel(options.data);
            }
        }
    };

    var viewModel = ko.mapping.fromJS(result.Data, mapping);    

    ko.applyBindings(viewModel);

});

var mapModel = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.Map = ko.computed(function() {
        var address = "";
        var enteredElements = 0;

        if (this.Address1 != helpText) {
            address += " " + this.Address1;
            enteredElements++;
        }

        if (this.Address2 != helpText) {
            address += " " + this.Address2;
        }

        if (this.City != helpText) {
            address += " " + this.City;
            enteredElements++;
        }

        if (this.State != helpText) {
            address += " " + this.County;
            enteredElements++;
        }

        if (this.PostalCode != helpText) {
            address += " " + this.Postal;
        }
        alert("hi");

        //only upate map if enough data has been entered to give accruate location
        if (enteredElements >= 3) {
            MYMAP.placeMarkers(address);
        }
    }, this);
};​

【问题讨论】:

    标签: javascript jquery knockout.js knockout-mapping-plugin


    【解决方案1】:

    当您通过映射插件发送数据时,您的所有属性都将变为可观察对象。

    这意味着你需要像这样的函数来访问它们:

        if (this.Address1() != helpText) {
            address += " " + this.Address1();
            enteredElements++;
        }
    

    当您在计算的可观察对象中将它们作为可观察对象访问时,它将创建一个依赖项。因此,目前您的计算出的 observable 最初会被评估,但它永远不会再次更新,因为它不会访问任何 observable 的值。

    【讨论】:

    • 进行了更改,但现在我收到“Contact:340Uncaught TypeError: Object [object Object] has no method 'Address1'”错误,指向计算的 observable。
    • 在 chrome js 调试器中查看 mapModel,它的属性是“Map”和“ko_mapping”。如何访问映射插件设置的模型的其他属性?
    • 这里有一个小提琴,也许你可以修改它来展示更接近你的场景的东西:jsfiddle.net/rniemeyer/RUsp2。我不确定您的数据到底是什么样的。看起来您的结果数据具有 Map 属性,而且您正在创建一个 Map 计算的 observable 作为它的子级。
    • 终于搞定了! results.data 只包含属性、地址1、城市等...,它没有地图属性。这只是我想在客户端创建的计算属性。我将自定义映射从“Map”更改为“Data”,因为“Data”包含所有属性,并且在 ko.mapping.fromJS 上我传入的是 result 而不是 result.Data。然后我遇到了绑定字段的问题,只是说 Object 而不是实际值,直到在 html 中我添加了一个“with:Data”绑定到包含的元素。这是我当前代码的js小提琴jsfiddle.net/JPS5s/2
    猜你喜欢
    • 2023-03-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-14
    • 2014-02-19
    • 2015-03-17
    • 2016-05-21
    • 2014-04-17
    相关资源
    最近更新 更多