在Knockoutjs绑定中是否有任何方法可以指定optionsGroup?像follwoing这样的东西
<select data-bind="options: collection, optionsText: 'Text', optionsGroup: 'Group'/>
Run Code Online (Sandbox Code Playgroud)
请回复.
我们使用knockout和knockout映射插件来促进我们的jQTouch Web应用程序中的数据绑定.我们使用映射插件的原因是能够使用knockout而无需在javascript中手动定义/更改viewmodels.当您从服务器/客户端数据库初始加载数据时,映射插件很有用.
我们遇到的问题是我们有一些屏幕/视图,其中有一种形式可能没有任何初始数据.如果没有这个初始数据,映射插件就无法"生成"viewmodel(ko.mapping.fromJS).这意味着我们仍然需要手动为视图的大部分定义视图模型.
假设这是映射插件(应该)支持的场景,我错了吗?我的意思是,这意味着映射插件仅在您始终具有初始数据加载的情况下可用.
我是KnockoutJS的新手,我不得不尝试ko.observableArray()在mapping插件创建的生成对象中添加其他属性和方法.
这是我要去的地方:
Usersko.observableArray()用映射插件创建了它User,到目前为止很好:o)
这是我正在尝试做的事情:
每个User都有一个名为的属性'IsActive'- 我想data-bind在每个User对象上切换此'IsActive'属性的方法的click事件.
这个问题看起来很有希望,但是我必须在JS中声明整个View模型似乎是不必要的重复(除非我必须这样做!) - 是否可以只扩展生成的对象?
我正在考虑这些方面,其中有一种方法可以声明其他属性或方法,并让它们扩展mapping生成的对象,但本文关注的是单个对象,而不是在生成的数组中扩展对象.
这是代码: http ://jsfiddle.net/yZkSf/2/ (尚未在JS小提琴中工作 - 但我将继续使用它并在我开始工作时更新此链接).
谢谢您的帮助
我遵循这个例子http://jsfiddle.net/rniemeyer/badZb/.我只是将确切的代码复制并粘贴到示例应用程序中,它给了我这个错误:"ko.mapping is undefined".有谁知道发生了什么?我的ko.observable和dependentObservable工作得很好,只是ko.mapping不起作用.
仅供参考:knockout.js版本是2.0和Jquery 1.7.1
在require.js中加载映射插件的标准方法是什么?
下面是我的config.js(require.js配置文件)
require.config({
// Initialize the application with the main application file.
deps: ["app"],
paths:{
// JavaScript folders.
libs: "lib",
plugins: "lib/plugin",
templates: "../templates",
// Libraries.
jquery: "lib/jquery-1.7.2.min",
underscore: "lib/lodash",
text: 'text',
order: 'order',
knockout: "lib/knockout",
knockoutmapping: "lib/plugin/knockout-mapping"
},
shim:{
underscore:{
exports: '_'
},
knockout:{
deps: ["jquery"],
exports: "knockout"
}
}
}
Run Code Online (Sandbox Code Playgroud)
在我的视图模型中
define(['knockout', 'knockoutmapping'], function(ko, mapping) {
}
Run Code Online (Sandbox Code Playgroud)
但是,映射不限于ko.mapping.任何指针/建议将不胜感激.
谢谢,拉维
我有以下型号:
var model = {
A: 'One',
B: 'Two',
C: 'Three'
};
Run Code Online (Sandbox Code Playgroud)
我将各种UI元素绑定到这些字段,效果很好.但是,我将模型转换回JavaScript对象,以便我可以保存对服务器的任何更改:
var goingToServer = ko.toJS(model);
Run Code Online (Sandbox Code Playgroud)
goingToServer将包括属性A,B和C.但是,假设属性C是一个永远不会改变的大量数据.我想避免将其发送回服务器.
有没有办法在将模型转换回JavaScript对象时toJS() 只包含一组预定义的字段?
我一直在研究的一件事是Knockout Mapping插件.它有一个名为include的设置,记录如下:
将视图模型转换回JS对象时,默认情况下,映射插件仅包含属于原始视图模型的属性,除非它还包含Knockout生成的_destroy属性,即使它不是原始对象的一部分.但是,您可以选择自定义此数组:
但是,看起来这个插件不能像记录的那样工作,因为它ko.mapping.toJS()仍然包括A,B和C,即使我传入了一个include数组['A', 'B'].我猜这个功能旨在包括原始模型中没有的其他字段.
有没有办法在将模型转换回JavaScript对象时排除某些属性,而不是做一些hacky,例如生成对象并在发送到服务器之前手动删除我不想要的属性?
我有一个带有数据注释的模型,我是一个使用knockout模板绑定和映射插件的viewmodel动态绑定.我正在尝试对我的模型进行不显眼的客户端验证.在这种情况下我们如何做到这一点.任何帮助/建议?
public class MyUser
{
[Required]
[StringLength(35)]
public string Username { get; set; }
[Required]
[StringLength(35)]
public string Forename { get; set; }
[Required]
[StringLength(35)]
public string Surname { get; set; }
}
Run Code Online (Sandbox Code Playgroud)
在我看来,我是使用ajax动态模板绑定MyUser列表.
public JsonResult TestKnockout()
{
IList<MyUser> myUserList = new List<MyUser>();
myUserList.Add(new MyUser { Username = "ajohn", Surname = "surname" });
myUserList.Add(new MyUser { Username = "ajohn1", Surname = "surname1" });
return Json(myUserList, JsonRequestBehavior.AllowGet);
}
}
Run Code Online (Sandbox Code Playgroud)
视图:
<form id="Userform" action='@Url.Action("Save", "Home")' data-bind="template: {name: 'UserTemplate', foreach:UserList}">
<input type="Submit" name="name" …Run Code Online (Sandbox Code Playgroud) unobtrusive-javascript data-annotations unobtrusive-validation knockout-mapping-plugin knockout.js
我刚刚开始尝试knockout.js.ko.mapping提供了一种从服务器获取和映射数据的极好方法.但是我无法使映射工作.
我有一个简单的模型:
//var helloWorldModel;
var helloWorldModel = {
name: ko.observable('Default Name'),
message: ko.observable('Hello World Default')
};
$(document).ready(function() {
ko.applyBindings(helloWorldModel);
//a button on the form when clicked calls a server class
//to get json output
$('#CallServerButton').click(getDataFromServer);
});
function getDataFromServer() {
$.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) {
mapServerData(data);
});
}
function mapServerData(serverData) {
helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
alert(JSON.stringify(serverData));
}
Run Code Online (Sandbox Code Playgroud)
helloWorldModel只有2个属性 - 与服务器返回的完全相同.mapServerData中的警报显示 -
{"name":"chicken","message":"JSON hello world"}
Run Code Online (Sandbox Code Playgroud)
我查找了有关类似问题的其他帖子,但似乎都没有解决这个问题.也许我错过了一些非常基本的东西 - 想知道是否有人可以指出它.
另请注意,如果我没有预先声明模型并使用
helloWorldModel = ko.mapping.fromJS(serverData);
Run Code Online (Sandbox Code Playgroud)
它正确地将数据映射到我的表单.
我有一个问题,将从服务器收到的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);
}
});
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<p>First name: <input …Run Code Online (Sandbox Code Playgroud) ko.mapping.fromJS(myObject)为viewModel.如果我使用ko.applyBindings(viewModel);它完美更新ui.但它再次增加了相同的事件.因此,如果用户单击该按钮,则会触发事件两次,第三次,依此类推.
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();
});
Run Code Online (Sandbox Code Playgroud)
Steve Greatrex您可以发布自定义绑定实现吗?
ko.bindingHandlers.domBinding = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
viewModel.domElement = element;
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
viewModel.domElement = element;
},
};
Run Code Online (Sandbox Code Playgroud)