在淘汰中使用JSON时计算的可观察性

本文关键字：计算 可观察性 JSON 淘汰 | 更新日期: 2023-09-27 18:28:50

我正在寻求一些淘汰建议。我已经发布了这个问题，但我的理解已经改变了，所以我转发。

我有以下代码：

function updateViewModel() {
    if (typeof groupId == 'undefined') {
        groupId = getDefaultGroupId();
    }
    $.getJSON("api/livestatusgroup/children/" + groupId)
        .done(function (data) {
            ko.mapping.fromJS(data, liveStatusViewModel.groups);
            groupsLoaded();
        });
    $.getJSON("api/livestatusgroup/resources/" + groupId)
        .done(function(data) {
            ko.mapping.fromJS(data, liveStatusViewModel.resources);
            resourcesLoaded();
        });
    this.resourceImagePath = ko.computed(function () {
        return "../Image/" + this.resourceID();
    }, this);
}

function ViewModel() {
    var self = this;
    self.resources = ko.mapping.fromJS([]);
    self.groups = ko.mapping.fromJS([]);
}

正如您所看到的，我正在使用JSON加载我的视图模型，但我在使用resourceID（）方法时遇到了问题。我不知道如何编写将this.resourceID（）替换为resourceID（例如../Image/1）的方法

    liveStatusViewModel.resources.resourceID() = ko.computed(function() {
        return this.ResID;
    }, liveStatusViewModel);

但那没用。有人能帮我吗？我已经看遍了互联网，包括Stack Overflow，但没有运气。这真是个绊脚石！

进一步工作

我刚刚尝试更改将/Image/xx附加到图像src的方式，如下所示：

    function resourceImagePath(resourceId) {
        return "/Images/" + resourceId;
    }

使用以下HTML标记

<div class="icon" id="resourceIcon" runat="server"><img data-bind="attr: { src: resourceImagePath(ResourceId) }" alt=""/></div>

这不起作用。令人烦恼的是，上面的函数resourceImagePath重写如下：

    function resourceImagePath(resourceId) {
        return "/Images/1";
    }

图像id经过硬编码以进行测试，效果绝对不错。

理想情况下，我想知道如何使JSON中的资源ID可见。

有人有其他想法吗？

谢谢，Mark

在淘汰中使用JSON时计算的可观察性

我认为您的结构不正确，因为计算函数"resourceImagePath"应该是单个资源的定义。

我知道你可能想使用这个映射插件，但根据我的经验，我发现手动映射时有更大的灵活性。这并不有趣，但你只做一次，然后继续前进。

以下是我将如何处理这一问题。我根本没有测试过。

  1. 定义视图模型（"资源"、"组"、"视图模型"；包括计算的变量）

  2. 调用viewModel.Initialize函数加载文档

  3. 当通过JSON结果（即"数据"）调用初始化循环以收集数据时，
    创建Javascript对象的新实例（即"资源"、"组"）

    // global variable
var groupId;

// define view models
var resource = function(resourceID){
    var self = this;
    self.resourceID() = ko.observable(resourceID);
    self.resourceImagePath = ko.computed(function () {
            return "../Image/" + self.resourceID();
    }, self);
}
// define group
var group = function(groupId){
    var self = this;
    self.groupID() = ko.observable(groupId);
}
var viewModel = function() {
        var self = this;
        self.resources = ko.observableArray([]);
        self.groups = ko.observableArray([]);
        self.Initialize = function(){
            if (typeof groupId == 'undefined') {
                    groupId = getDefaultGroupId();
            }
            $.getJSON("api/livestatusgroup/children/" + groupId)
                    .done(function (data) {
                            for(var i = 0, j = data.length; i< j; i++){
                                self.groups.push(new group(data[i].groupID))                            
                            }                                                       
                            groupsLoaded();
                    });
            $.getJSON("api/livestatusgroup/resources/" + groupId)
                    .done(function(data) {
                            for(var i = 0, j = data.length; i< j; i++){
                                self.resources.push(new resource(data[i].resourceID))                           
                            }                                                       
                            resourcesLoaded();
                    });     
        }
}

var vmContext;
$(function () {
    vm = new viewModel();
    vm.Initialize();
});

一眼望去，我发现了几个潜在的问题。

<img data-bind="attr: { src: resourceImagePath(ResourceId) }" />

这里的问题是，在调用resourceImagePath函数时，您没有解决可观察到的问题。当被直接调用时，您只能使用不带括号的observable，如

<img data-bind="attr: { src: SourceObservable }" />

因此，正确的书写方式应该是

<img data-bind="attr: { src: resourceImagePath(ResourceId()) }" />

此外，您计算的ResourceID没有正确分配。

liveStatusViewModel.resources.resourceID() = ko.computed(function() {
    return this.ResID;
}, liveStatusViewModel);

在这里，您可以在resourceID上添加paransition，它试图解析函数，同时也试图在表达式的右侧分配一个值。这不是有效的JavaScript。删除括号后，它应该可以工作。

liveStatusViewModel.resources.resourceID = ko.computed(function() {
    return this.ResID;
}, liveStatusViewModel);

至于你帖子的其余部分，我真的不明白你想做什么，所以这是我能给出的最好的答案。我不确定是要将resourceID分配给liveStatusViewModel.resources上的每个资源，还是要添加一个在liveStatusView Model.resources对象上计算的资源。如果你澄清，我将能够进一步回答。

相关文章：