标签: knockout-mapping-plugin

我有一个问题,将从服务器收到的Json对象映射到预定义的Javascript对象,该对象包含绑定中使用的所有必要函数

Javascript代码如下

function Person(FirstName, LastName, Friends) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
    self.FullName = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    })
    self.Friends = ko.observableArray(Friends);
    self.AddFriend = function () {
        self.Friends.push(new Person('new', 'friend'));
    };
    self.DeleteFriend = function (friend) {
        self.Friends.remove(friend);
    };      
}

var viewModel = new Person();

$(document).ready(function () {
    $.ajax({
        url: 'Home/GetPerson',
        dataType: 'json',
        type: 'GET',
        success: function (jsonResult) {
            viewModel = ko.mapping.fromJS(jsonResult);
            ko.applyBindings(viewModel);
        }
    });
});

HTML:

<p>First name: <input …

如何更新完整的viewModel？

1. 在页面加载时,我得到一个模型并将其转换ko.mapping.fromJS(myObject)为viewModel.
2. 如果用户单击按钮,我想从服务器获取更新的数据
3. 现在我想应用theese更新

如果我使用ko.applyBindings(viewModel);它完美更新ui.但它再次增加了相同的事件.因此,如果用户单击该按钮,则会触发事件两次,第三次,依此类推.

题

更新完整viewModel的好方法是什么.也许我删除绑定并再次应用它们？(这该怎么做).

样品

var viewModel;

function update() 
{
    $.ajax({
        url: '...',
        type: "GET",
        statusCode: {
            200: function (data) {
                 viewModel = ko.mapping.fromJS(data);
                 ko.applyBindings(viewModel);
            }
        }
    });    
}

// first call after page load
update();

// user click
$("#myButton").click(function() {
    update(); 
});

更新

Steve Greatrex您可以发布自定义绑定实现吗？

ko.bindingHandlers.domBinding = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        viewModel.domElement = element;
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        viewModel.domElement = element;
    },
};

我正在开始一个新项目,并且热衷于使用对我来说很新的KnockoutJS + Web Api,我对Web Api有很好的理解,但Knockout目前很难理解.

这是我最初想要我的应用程序如何工作的想法:

• 我有一个标准的MVC控制器,如 LeadsController
• LeadsController有一个Action被调用ListLeads,但实际上并没有返回任何数据,只是返回一个带有模板的视图来显示来自Knockout的数据.
• 该ListLeads视图LeadsApiController通过ajax 调用我的api控制器以获取要显示的潜在客户列表
• 然后将潜在客户数据映射到KnockoutJs ViewModel(我不想将我的视图模型从服务器端复制到JavaScript视图模型中)
• 我希望尽可能多地使用外部JavaScript文件,而不是让我的HTML页面充满JavaScript.

我见过很多例子,但大多数都在第一页加载时返回一些初始数据,而不是通过ajax调用.

所以我的问题是,当从ajax中检索时,如何为Knockout创建我的JavaScript viewModel,其中ajax url是使用创建的Url.Content().

另外,如果我需要在此ViewModel上有额外的计算值,我将如何从服务器端扩展映射的视图模型.

如果我没有很好地解释自己,请告诉我你不确定的内容,我会尝试更新我的问题以使其更加明确.

我正在使用knockoutjs,我正在尝试从JSON数据填充ViewModel实例.根据knockoutjs文档,我可以使用此声明:

ko.mapping.fromJS(data, viewModel);

这是我的代码:

var pledgeVM=function(){            
      this.name=ko.observable();
      this.Assets=ko.observableArray([]);
      this.StartEdit=function(assetModel){
      };
 };
        pledge = {"name":"Moses","Assets":[{"CityId":13,"commetns":null},{"CityId":14,"commetns":null}]};
        var pledgeVMinstance=new pledgeVM();
        ko.mapping.fromJS(pledge,pledgeVMinstance);

由于某种原因,数据未填充(pledgeVMinstance.name()未定义),除非我将语句更改为:

ko.mapping.fromJS(pledge,{},pledgeVMinstance);

可能有人可以解释我为什么会这样.

谢谢

我从服务器获取以下数据:

var data =   [{ id: 0, child: { prop1 : 'a', prop2 : 'b' } }   //Child object has data
             ,{ id: 0, child: null } ];    // Child object is null

在使用knockout mapping插件映射数据后,我遇到了一些问题.问题是内部child对象的类型不同.

执行后:

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

我得到第一个对象具有带数据child的类型属性Object.但是,第二个对象具有child类型的属性Observable,当它被解包时返回null.

如何在两种情况下都使对象具有相同的类型,即使一个具有值,另一个为null.无法更改服务器的行为方式.我希望有Object和null或两者Observables.

JsFiddle 在这里.

我正在尝试使用knockout映射插件将一个对象数组映射到observableArray.不知何故,这根本不适合我.

我刚用Crome控制台测试验证:

ko.mapping.fromJS( [ { x: 1, y: "test" } ] )

returns:
[]

我究竟做错了什么？如果我尝试以下

ko.mapping.fromJS( [ { x:1, y: "test" } ][0] )

returns an object containing x and y as observables...

一切都运作良好.唯一的区别是我只提供一个对象而不是一个对象数组.但是如果我正确地阅读了映射插件的文档,它应该能够处理从普通数组中创建observableArray.

感谢你的帮助,
安德烈亚斯

似乎敲除没有正确映射数组中对象的属性.

从chrome控制台中查看此示例:

> var viewmodel = ko.mapping.fromJS({list:[]});
undefined

> viewmodel.list().unshift({ name : ko.observable("Foo") });
1

> viewmodel.list()[0].name();
"Foo"

> var js = ko.mapping.toJS(viewmodel);
undefined

> js.list[0].name;
undefined

所以正在创建javascript对象,但是'name'属性没有被映射.

任何想法都非常欢迎!

我正在使用Knockout来实现课程列表选择工具.我使用下面的方法来填充数据(MVC3/Razor),这样当最初填充viewmodel时,我对每个KO数组(即CourseList,ScheduleList)没有任何问题.但是,当来自服务器的初始加载返回零行时,意味着视图模型'ScheduleList'属性为空,则无法调用任何方法,如.push()或.removeAll().据推测,这意味着从未创建过可观察数组,因为没有任何内容可以填充它.填充模型时,ScheduleList属性将填充List.当MVC操作将其返回为空时,实例化它的最佳方法是什么？有一个似乎解决它的jsFiddle,但是当我尝试使用'create'选项时,它会将我的整个模型渲染为空白.我不确定'create'选项的语法是什么.jsFiddle在这里:http://jsfiddle.net/rniemeyer/WQGVC/

// Get the data from the server
var DataFromServer = @Html.Raw(Json.Encode(Model));     

// Data property in viewmodel
var data = {
    "CourseList": DataFromServer.CourseList ,
    "ScheduleList": DataFromServer.ScheduleList
    };

$(function() {
    // Populate Data property
    viewModel.Data = ko.mapping.fromJS(data);   

    // ko.applyBindings(viewModel, mappingOptions);             
    ko.applyBindings(viewModel);
});

当初始页面加载未填充ScheduleList时,以下代码将引发错误.如果初始页面加载包含数据,那么您可以调用.removeAll()和.push()等.

var oneA= 'abc';

// push not working                
this.Data.ScheduleList.push( oneA );

我是淘汰赛的新手,我正在创建一个想要获得淘汰赛优势的jquery移动应用程序.我已经花了最后一天抨击我的头撞到一个非常简单的问题..我已经删除了代码并手动绑定(因此几乎击败了使用KO而不是jquery的目的)..无论如何,如果有人可以告诉我如何改变我必须使用KO的真正力量,那么对我来说这将是一个很好的基础.我能找到的任何代码示例总是存在比这更复杂的问题(处理数组等)

我的JSON:

{"id":9,"fullName":"John Doe","firstName":"John","lastName":"Doe","referenceNumber":"BUY-08","position":"Buyer","type":"Buyer","telephone":"028 82 240780","email":"m@email.com","departmentId":3,"departmentName":"DEPT B","country":"United Kingdom"}

我的HTML:

 <div>
    Full Name: <input data-bind="value: fullName" disabled="disabled"/> <br />
    Ref: <input data-bind="value: reference" disabled="disabled"/> <br />
    Position: <input data-bind="value: position" disabled="disabled"/> <br />
    Email: <input data-bind="value: email" disabled="disabled"/> <br />
    Dept: <input data-bind="value: departmentName" disabled="disabled"/> <br />
    Country: <input data-bind="value: country" disabled="disabled"/> <br />
</div>  

我的Javascript:

$(document).ready(function () { 

    function DetailsViewModel() {
        var self = this; 
        self.fullName = ko.observable("");
        self.reference = ko.observable("");
        self.email = ko.observable("");
        self.position = ko.observable("");
        self.departmentName = ko.observable(""); …

我正在使用kendo移动应用程序构建器,我使用knockout js进行绑定,但我收到错误" 你不能多次将绑定应用于同一个元素 ".我有两个javascript文件,包含绑定,在我的代码下面

//Employee.js//

function EmployeeViewModel() {
   this.EmployeeName= ko.observable();
   this.EmployeeMobile= ko.observable();
   this.EmployeeEmail= ko.observable(); }
   ko.applyBindings(new EmployeeViewModel());

//Company.js//
function CompanyViewModel() {
   this.CompanyName= ko.observable();
   this.CompanyMobile= ko.observable();
   this.CompanyEmail= ko.observable(); }
   ko.applyBindings(new CompanyViewModel());

//In index page i am using this both script file drag and drop//
<html>
 <head>
 </head>
 <body>
  <script src="Employee.js"></script>
  <script src="Company.js"></script>
 </body>
</html>