标签: knockout-mapping-plugin

我从服务器获取一个json对象并填充我的视图.然后我更改数据,将其推回服务器.然后我获取数据的新副本,希望它会刷新我的视图并进行任何更改.然而,这不会发生.TIA

$(document).ready(function() {
    var customer_id = get_customer_id();
    var data = load_model();
    contract_model = ko.mapping.fromJS(data,{});
    ko.applyBindings(contract_model);
}

function load_model(){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    var data = '';
    $.ajax({
        type:'GET',
        url:url,
        async:false,
        success: function(returningValue){
            data = returningValue;
        }
    });
    return data;
}

这个初始加载工作正常.然后我做了一些事情并更改了一个observable并将数据推送回服务器.服务器获取更新,然后我重新获取数据,以便视图将刷新(我知道我可以一步传回新数据,但这在代码中我还没有重构).

function refresh_data(contract_model){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    $.post(url,function(data){
        console.log(data);
        ko.mapping.fromJS(contract_model,{},data);
        ko.applyBindings(contract_model);
        console.log(ko.mapping.toJS(contract_model))
    });

}

function refresh_data(contract_model){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    $.post(url,function(data){
        console.log(data);
        ko.mapping.fromJS(contract_model,{},data);
        console.log(ko.mapping.toJS(contract_model))
    });

}

function push_model(contract_model,refresh){
    var url = '/ar/update_contract';
    var data = {'contract':ko.mapping.toJSON(contract_model)}

    delete data['lines'];
    $.post(url,data,function(return_value){
        if …

我一直试图解决这个问题很长一段时间了.我找不到任何解决这个问题的方法,但如果我错了请纠正我.

问题:我有来自JSON API的数据,有嵌套的数组/对象结构.我使用映射来初始用我的数据填充模型.为了更新这个,我希望在新数据到达时扩展模型,或者更新现有数据.

据我所知,映射选项键应该为我做这个技巧,但我可能误解了映射选项的功能.

我已经把这个例子代表的问题归结为:

var userMapping = {
    key: function(item) {
        return ko.utils.unwrapObservable(item.id);
    }
};

// JSON call replaced with values
var viewModel = {
    users: ko.mapping.fromJS([], userMapping)
};

// Should insert new - new ID?
ko.mapping.fromJS([{"id":1,"name":"Foo"}, {"id":2,"name":"Bar"}], userMapping, viewModel.users);

// Should only update ID#1 - same ID?
ko.mapping.fromJS([{"id":1,"name":"Bat"}], userMapping, viewModel.users);

// Should insert new - New ID?
ko.mapping.fromJS([{"id":3,"name":"New"}, {"id":4,"name":"New"}], userMapping, viewModel.users);

ko.applyBindings(viewModel);?

小提琴:http://jsfiddle.net/mikaelbr/gDjA7/

如您所见,第一行插入数据.都好.但是当我尝试更新时,它会替换内容.第三个映射相同; 它取代了内容,而不是扩展它.

我用错了吗？我应该在使用映射之前尝试"手动"扩展内容吗？

编辑解决方案:
我通过使用存储所有当前模型的第二个辅助数组解决了这种情况.在新数据上,我扩展了这个数组,并更新了视图模型以包含累积的项目.

在更新(在我的情况下,WebSocket的消息),我通过模型环,有关更改的项目内容,以及使用的方法valueHasMutated()得到改变的值淘汰赛LIB的通知.

我有一个MVC视图模型,如下所示:

public class DirectorySearchModel
{
    [Display(Name = "First name contains")]
    public string FirstName { get; set; }

    [Display(Name = "Last name contains")]
    public string LastName { get; set; }

    public CountriesCollection Countries { get; set; }
    public IEnumerable<Country> SelectedCountries { get; set; }
    public IEnumerable<Country> AllCountries { get; set; }
}

CountriesCollection对象(第9行)如下所示:

public class CountriesCollection
{
    [Display(Name = "Countries")]
    public int[] arrCountries { get; set; }
}

现在,我正在创建一个新的,空白的CountriesCollection实例,然后将其添加到DirectorySearchModel视图模型的空白实例中,然后将其全部序列化为Knockout.js的javascript视图模型:

{
"FirstName":null,

"LastName":null,

"Countries":{"arrCountries":[]},

"SelectedCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}],

"AllCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}]
}

我的复选框呈现为:<input checked="checked" data-bind="checked: Countries.arrCountries" …

我试图弄清楚我对Knockout的映射库有什么误解.我已经将它简化为一个简单的例子,并且仍然可以通过fromJS调用使其失败(而不是使用映射的变量更新).

在这个例子中,我从根本上犯了什么错误？

// Here's my view model
var ViewModel = function() {
    this.firstName = ko.observable('first');
    this.lastName = ko.observable('last');
};

var myVM = new ViewModel();

ko.applyBindings(myVM); // Apply to Knockout (works)

myVM.lastName('maiden name'); // Test an update (works)

var newData = {firstName: 'new', lastName: 'person'};

// Try update the ViewModel
ko.mapping.fromJS(newData, myVM); //(No update, or error)

// Intended result - UI updates to 'new person'

和相应的观点:

<div class='liveExample' >   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: …

当在挖掘映射中使用'create'选项时,我们将使数组成为可观察的数组.但是,我们如何使可观察数组中每个对象的属性成为可观察的？

在这个来自淘汰文档的例子中,children数组是一个可观察的数组,但是我想让每个对象文字中的所有元素如id,name也是一个可观察的元素.我们如何实现这一目标.只需ko.observable在创建块中放置每个新创建的对象？

var data = {
    name: 'Graham',
    children: [
        { id : 1, name : 'Lisa' }
    ]
};

// Your custom data model
var myChildModel = function (data) {
    this.id = data.id;
    this.name = data.name;
};

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);
        }
    }
};

var viewModel = ko.mapping.fromJS(data, mapping);

无法弄清楚为什么在使用knockout.mapping插件创建视图模型的情况下,处理计算的observable不会从全局变量中删除订阅.
首先让我们看看直接创建模型时会发生什么:

// Global variable.
var Environment = {
    currencyStr: ko.observable("usd.")
};
// Item model, used intensively.
function ItemModel(price) {
    var self = this;
        
    this.price = ko.computed(function () {
        // Computed is subscribed to global variable.
        return price + ' ' + Environment.currencyStr();
    });
};

ItemModel.prototype.dispose = function () {
    // Dispoing subscription to global variable.
    this.price.dispose();
};

function ViewModel() {
    var self = this;
    
    self.items = ko.observableArray([]);
    // Simply adds 1000 new items to observable array directly.
    self.addItems = …

我有多个员工的每日数据,并且根据可能意味着大量数据的开始时间和结束时间.

因此,使用映射插件,我将它们映射到一个大的列表,但我需要将它们按员工分组到较小的列表中,这样我就可以为每个员工制作一个表(如较小的视图模型),该表对该数据子集进行过滤和排序.

这是我用静态数据创建的基本示例.

$(function () {
    var data = {
        Employees: [{
            Id: 1,
            Name: "Employee1",
            Day: new Date(),
            Price: 12.54
        }, {
            Id: 2,
            Name: "Employee2",
            Day: new Date(),
            Price: 112.54
        }, {
            Id: 1,
            Name: "Employee1",
            Day: new Date(),
            Price: 12.54
        }, {
            Id: 3,
            Name: "Employee3",
            Day: new Date(),
            Price: 12.54
        }]
    };

    // simulate the model to json conversion. from now on i work with the json
    var jsonModel = JSON.stringify(data);

    function employeeModel(data) {
        var employeeMapping …

我正在尝试淘汰映射样本,并认为我几乎就在那里.我似乎无法在viewModel.foos中添加新的Foo - 有谁能看到我在这里错过的内容？

var Foo = function (data) {

    var self = this;
    self.id = data.id;
    self.Name = ko.observable(data.Name);

}

var dataMappingOptions = {
    key: function(data) {
        return data.id;        
    },
    create: function (options) {

        return new Foo(options.data);
    }
};


var viewModel = {

    foos: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    }
};

viewModel.addFoo = function () {
    viewModel.foos.push(ko.mapping.fromJS(new Foo()));
    viewModel.loadUpdatedData();
}


    <ul data-bind="template: {name: 'TopTemplate'}"></ul>
<script type="text/html" id="TopTemplate">
    <li><span>Result</span>
        <ul …

我有来自服务器的这个JSON数据:

{"HaveNotification":false,"IsError":false,"Title":null,"Description":null}

并尝试通过ko.mapping填充此视图模型:

var notifyVM = {
  HaveNotification: ko.observable(true),
  IsError: ko.observable(false), 
  Title: ko.observable('Title goes here'), 
  Description: ko.observable('Description goes here'), 
}

使用此代码,在轮询间隔调用该代码:

function pollNotifications() {

  $.getJSON('@Url.Action("GetNotifications", "Home")', function (data) {

    ko.mapping.fromJSON(data, notifyVM);

    setTimeout(pollNotifications, 10000);
  });
}

这是页面加载代码:

$(function () {

  ko.applyBindings(notifyVM);

  setTimeout(pollNotifications, 10000);
});

但它不起作用.如果我在fromJSON调用之后检查视图模型,则不会更新observable,它们仍处于初始值.

更新:更多信息......如果我在pollNotifications函数中执行此操作

var newVM = ko.mapping.fromJSON(data);

我注意到它创建的视图模型与我的视图模型不同,它由一个可观察的函数组成,而我的是一个具有一组可观察属性的对象.

我正在寻找一种方法来使用knockout和knockout mapping将项添加到属于另一个数组中的项的数组.

我有以下,一个Person,它有一个WorkItems数组,有一个ActionPlans数组.Person> WorkItems> ActionPlans

淘汰赛代码如下 -

var PersonViewModel = function(data) {
var self = this;
ko.mapping.fromJS(data, trainingCourseItemMapping, self);

self.addWorkItem = function() {
    var WorkItem = new WorkItemVM({
        Id: null,
        JobSkillsAndExpDdl: "",
        JobSkillsAndExperience: "",
        ActionPlans: ko.observableArray(),
        PersonId: data.Id
        })
   self.WorkItems.push(WorkItem)
};

self.addActionPlan = function () {
    var actionPlan = new ActionPlanVM({
        Id: null,
        priorityAreaStage: "",
        goal: "",
        action: "",
        byWho: "",
        byWhen: ""
        WorkItemId: data.Id
    });
    self.ActionPlans.push(actionPlan);
};
}

数组映射

var trainingCourseItemMapping = {
'WorkItem': {
    key: function(workitem) {
        return …