使用knockout的映射插件,我将如何在我的模板中显示JSON对象的信息和数组.
//Example JSON data.
JSON = [{'title':'title of first object',
'content':'content of first json object'},
{'title':'title of second object', 'content': 'content of second json object'}]
var viewModel = ko.mapping.fromJS(data);
var data = $.getJSON('/post/.json', function(data) {
ko.mapping.fromJS(data, viewModel);
});
我可以通过viewModel()和viewModel()[0] .title()使用Chrome中的控制台访问对象,但不知道如何将此日期绑定到我的模板.
我有以下代码从ajax调用获取数据并绑定到我的页面的不同部分.
$.getJSON("api/RedeemProduct", { 'productId': productId }, function (data) {
categoryViewModel = ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory);
ko.applyBindings(categoryViewModel, $('section.intro').get(0));
activityTypesViewModel = ko.mapping.fromJS(data);
ko.applyBindings(activityTypesViewModel, $('.categories-gallery .frame').get(0));
activeActivityViewModel = ko.mapping.fromJS($('.categories-gallery .frame .category.active').data('wishlist-activity'));
ko.applyBindings(activeActivityViewModel, $('#details-box').get(0));
请参阅代码中的第一行,我将获取特定产品的数据.下次如果我使用相同的代码来绑定不同产品的数据,则绑定不会被更新,而是因为调用ko.applyBindings()而多次添加相同的产品
我该怎么做才能删除旧的绑定并将新数据绑定到这些部分？
我一直在这周围,并没有看到出错的地方.也许你可以帮忙.
有多种视图模型设置:
var viewModels = {
emailTemplateViewModel: {
subject: new ko.observable('dd'),
emailName: new ko.observable('dd'),
emailAddress: new ko.observable('dd'),
body: new ko.observable('dd')
},
deviceSettingsViewModel: {
managerName: new ko.observable('')
}
}
ko.applyBindings(viewModels);
我正在尝试使用从服务器返回的JSON填充其中一个视图模型(这是正确的并且格式正确).
function LoadEmailTemplate() {
$.getJSON('/EmailTemplate/Template', function (data) {
viewModels.emailTemplateViewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModels.emailTemplateViewModel);
})
}
但是,当我运行此操作时,我收到以下错误:"未捕获错误:您无法多次将绑定应用于同一元素."
但是我读到的所有文档都显示了映射后发生的绑定.
如果我从LoadEmailTemplate函数中取出绑定,那么在运行时没有错误,但页面显示默认值'dd',而不是那些应该从JSON响应映射的值.
该函数触发如下:
<li data-bind="click: LoadEmailTemplate"><a href="#"><i class="glyphicon glyphicon-chevron-right pull-right"></i>Email Template</a></li>
我正在尝试使用with-binding,因为电子邮件模板仅相对于页面的某个区域,例如
<div data-bind="with: emailTemplateViewModel">
和属性:
<input data-bind="value: emailAddress" type="email" class="form-control" id="inputFromEmail">
我知道这是有效的,因为表单加载了首次定义viewmodel时设置的值.看起来好像只是映射不合适.任何建议都会非常感激.
谢谢.
我有一个具有可观察数组的KnockoutJS模型,我需要能够从JSON加载,还可以通过简单地将数据对象推送到数组来添加.我发现当我使用映射加载数据时,我无法再获得数组中项目的长度/数量,它总是等于零.我认为这是由于映射？
这是ghist:
var SalesPerson = function (data) {
var self = this;
if (data != null) {
ko.mapping.fromJS(data, {Regions: regionMapping, Customers: customerMapping}, self);
} else {
self.ID = ko.observable();
self.FullName = ko.observable().extend({
required: {
message: '* Persons name needed'
}
});
//self.Regions = ko.observableArray();
self.Regions = ko.mapping.fromJS([]);
self.Customers = ko.mapping.fromJS([]);
//self.Customers = ko.observableArray(); // array of "Customers", who each have many orders
}
注意我最初使用eg放入数组self.Regions = ko.observableArray();,然后self.Regions = ko.mapping.fromJS([]);在看到相关帖子后改为this
这是整个 小提琴的小提琴
要测试小提琴,请单击"从内嵌模型加载"..区域和客户的"计数"应更新但不会更新,它将保持为零.
使用asp.net mvc,我传递一个viewmodel并获取knockout来映射一个viewmodel并绑定到它.
这对我来说都很好,我想做的是跟踪删除.
我想我可以通过添加_destroy属性但将其设置为false来完成此操作.
我希望ui会忽略这个,直到destroy将其设置为true.
但事实似乎并非如此,仅仅存在这种财产就会被视为被破坏.
这是一个错误还是我处理这个错误？
非常感谢,Kohan
var model = [{"Id":1,"Name":"Bikes","Parent":null,"_destroy":false},
{"Id":2,"Name":"Components","Parent":null,"_destroy":false},
{"Id":3,"Name":"Clothing","Parent":null,"_destroy":false},
{"Id":4,"Name":"Accessories","Parent":null,"_destroy":false},
{"Id":5,"Name":"Mountain Bikes","Parent":1,"_destroy":false},
{"Id":6,"Name":"Road Bikes","Parent":1,"_destroy":false},
{"Id":7,"Name":"Touring Bikes","Parent":1,"_destroy":false},
{"Id":8,"Name":"Handlebars","Parent":2,"_destroy":false}] ;
上述元素均不会显示.甚至"_destroy":null也有同样的效果.
更新:似乎是映射扩展的问题.
javascript destroy asp.net-mvc-3 knockout-mapping-plugin knockout.js
我真的是新的knockout.js.我想要实现的是限制foreach项目.这是我的来源:
<div data-bind="foreach: news">
<!-- ko if: catId === '4' -->
<div class="news-item">
<a data-bind="attr: { href: url, title: title }">
<div class="news-header-text" data-bind="text: title"></div>
</a>
<div class="news-date" data-bind="text: date" /></div>
</div>
<!-- /ko -->
</div>
这是我的javascript:
(function()
{ // Wrap in function to prevent accidental globals
if(location.protocol != "data:")
{
$(window).bind('hashchange', function()
{
window.parent.handleChildIframeUrlChange(location.hash)
});
}
// Class to represent a row in the seat reservations grid
function cebesEnNewsIndex(title, date, url, catId, hits)
{
var self = this;
self.title …我在淘汰赛中绑定选择列表
HTML:
<select data-bind="options: $parent.Languages, optionsValue:function(item) { return item.Value; }, optionsText: function(item) {return item.Text; }, value: LanguageID, valueUpdate: 'change'" />
on submit ==> var data = ko.mapping.toJS(viewModel1);
控制器:
Languages = new SelectList(this.Languages(), "ID", "LanguageName", SelectedLanguageID);
它返回LanguageID ="Selected:true,ID:1,LanguageName:"English"中的完整对象,但我希望它只返回类似于LanguageID = 1的ID
我已经使用了subscribe方法并分配了
我对 KnockoutJS 还比较陌生，我遇到了绑定问题，看不出哪里出了问题。我尝试过各种方法，但似乎没有任何效果。我确信可能有一个简单的解决方案，只是我看不到！
我通过 ajax 调用数据并尝试显示文本框中数据中的一项，然后可以更新该项目。我在控制台中收到以下错误：
未捕获的ReferenceError：无法处理绑定“with：function（）{return KHAViewModel}”消息：无法处理绑定“with：function（）{returnfundedWTEResults}”消息：无法处理绑定“textInput：function（）{return ActualFundedWTE }" 消息：ActualFundedWTE 未定义
下面是我的代码的精简版本，我用一些 JS 复制了我的 ajax 脚本。我也在jsFiddle上复制了它上复制了它：
超文本标记语言
<div class="container">
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>
<div class="container" id="dateSearch" >
<h2></h2>
<form class="form-inline" data-bind="with: KHAViewModel">
<div class="form-group" data-bind="with: fundedWTEResults">
<span>Funded WTE: </span>
<input id="fundedWTE" data-bind="textInput: ActualFundedWTE">
</div>
</form>
</div>
JS
// KHA View Model
function KHAViewModel() {
var self = this;
self.fundedWTEResults = ko.observableArray([]);
function fundedWTE (team) {
// $.ajax({
// url: "/...",
// type: "POST",
// ........... …