标签: knockout-mapping-plugin

当我使用ko.mapping.toJSON它时,我将所做的任何更改转换为字符串,它们需要是数字.我尝试使用自定义映射,如下所示:

    var mapping = {
   'y': {
        update: function(options) {
                return parseFloat(options.data);
        }
    }
}

...但这只会将它们作为数字保留在页面的内容中.由于我使用它来更新和由HighCharts.js引入的外部JSON,因此即使在toJSON之后,数字也需要保留数字.

从之前的答案我可以使用:

//override toJSON to turn it back into a single val
    mappedData.prototype.toJSON = function() {
       return parseInt(ko.utils.unwrapObservable(this.val), 10);  //parseInt if you want or not 
    };

...游泳工作.但是这只是JSON中的单个值类型,因此我不清楚如何使用相同的覆盖.我是否还需要在此实例中创建一个全新的对象来执行此操作.或者他们的东西更简洁？

我正在尝试使用KnockOut映射插件创建视图模型,

这是对象,基本上下面是一个带有单词的句子.

var data = {
name: 'Example Title',
sentences: [
    {id: 1, words: [{text: 'word1'}, {text: 'word2'}]},
    {id: 2, words: [{text: 'word3'}, {text: 'word4'}]}
           ]};

我想有三个视图模型,

文章应包含句子,句子应包含文字

var ArticleViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.sentences = ko.observableArray([]);
}

var SentenceViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.words = ko.observableArray([]);
}

var WordViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.text = ko.observable(data.text);
}

我想把它放在View中,如下所示;

<p data-bind="foreach:sentences">
  <span …

我有一个淘汰模型,正在提供我的页面和保存下面的代码是客户端执行.

self.save = function() {
    var tirerun = ko.mapping.toJSON(self.data());
    $.ajax({
        type: 'post',
        url: "@Url.Action("SaveTireRunModel", "Events")",
        data: tirerun,
        success: function(result) {
            if (!result.success) {
                alert(result.error);
            } else {}
        }
    });
};

然后它将以下JSON发布到我的服务器(来自fiddler并为简洁而裁剪)

使用以下http请求标头

POST http://localhost:63648/Events/SaveTireRunModel HTTP/1.1
Host: localhost:63648
Connection: keep-alive
Content-Length: 1975
Origin: http://localhost:63648
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko)         Chrome/19.0.1084.56 Safari/536.5
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: */*
Referer: http://localhost:63648/Events/OutingDetails?outingID=010fd8a1-e3a5-e111-a660-f0def1589f4b
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: jstree_open=%232012%2C%23c914324c-4d9f-e111-a79b-0024e8a037d3%2C%23eb-e957-e111-9e70-d067e53b2ed6%2C%234d-c00e-e111-ad1c-0e6e17349d3e%2C%2357-c00e-e111-ad1c-0e6e17349d3e%2C%234d-c00e-e111-ad1c-0e6e17349d3e; jstree_load=; .ASPXAUTH=054DD21DC0A17DDDAAFC254500ED8D6B3299EAABF1FB647732618E956EF082880BBA0B52A59849D3362AA03EB1F27D28867B07CD8451E4E983D84365608AA145F8DF8D71C2481639E110EC31325EE27EA3281FA2EDB7AD31A744D2A9918BE6599DB97E489ED4598D2DF63C31E36E809A282CF96FFCE5ACAEF8308FEA3DF1C6DE50B2AA7299F9D9AF0C30CE867DCCA352; jstree_open=%232012%2C%233dcc4b9b-37a3-e111-a6d3-0026b99ca1da%2C%23eb-e957-e111-9e70-d067e53b2ed6%2C%2357-c00e-e111-ad1c-0e6e17349d3e%2C%23a2962e1b-45a5-e111-b9ac-f0def1589f4b; jstree_load=%2311a4611a-8851-e111-95c7-60d819fcced5%2C%23b89422a0-0d03-e011-99cb-d601d71f0fcf; jstree_select=%23010fd8a1-e3a5-e111-a660-f0def1589f4b

{"Comments":"RSTA Dwn 2 …

我试图在嵌套的JSON对象上使用Knockout的映射插件,里面有可变数据.但是,我不确定如何在HTML中显示它.如何正确映射所有嵌套的JSON对象并将其显示为简单的字符串？这是我的代码:

JS

var ListModel = function(jsonData) {
  var self = this;
  self.master = ko.mapping.fromJS(jsonData);
}
var listModel = new ListModel(jsonData);
ko.applyBindings(listModel);

HTML

<!-- ko foreach: master -->
  <div data-bind="text: $data"></div> 
<!-- /ko -->

示例JSON

{"Level 1a":"Hi","Level 1b":{
  "Level 2a":"Hello","Level 2b":{
    "Level 3":"Bye"}
  }
}

样本输出

Hi
  Hello
    Bye

我在这里要做的主要是打印出所有嵌套级别的值.关键值和嵌套级别的数量是完全可变的(我在SO和在线上找到的大多数嵌套JSON示例都是固定密钥).这可能吗？

更新:我发现jQuery等价,但我仍然需要针对observable的Knockout实现.

JSFiddle:http://jsfiddle.net/abepark/rzeNC/7/

我有一个问题,从自动完成下拉列表中选择一个选项后,ko.observable属性Job.CompanyName没有更新.

无论如何更新ko.observable属性而不创建自定义绑定器？

var model = {
  Job: {
    CompanyName: "Test" 
  }
};

var InterviewViewModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
  this.add = function (data) {
    console.log("click");
    console.log(this.Job.CompanyName());
  }.bind(this);
}

$("#CompanyName").autocomplete({
  source: ["Test", "cool", "what", "Example", "Cookies"]
});

var viewModel = new InterviewViewModel(model);
ko.applyBindings(viewModel);

viewModel.Job.CompanyName.subscribe(function (val) {
  console.log(val);
});

我正在使用这个Bootstrap DateTime Picker:http://eonasdan.github.io/bootstrap-datetimepicker/

我为DateTime创建了一个名为datepicker的Custom Binder:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {format: 'DD/MM/YYYY HH:mm'};
        $(element).datetimepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function(event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });
    },
    update: function(element, valueAccessor)   {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if …

使用knockout.mapping我尝试从JSON映射到ko-object.当我尝试使用带有映射选项的更高级解决方案时,我常常得到Uncaught TypeError: g is not a function.我试图弄清楚什么是问题,但我仍然感到困惑.

可以说我有一个非常简单的模型:

var data1 = { // works
  a: "a",
  b: [ 
    { b1: "v1" }, 
    { b2: "v2" } 
  ] 
};

现在使用这个模型就像这样:

function viewModel ( data ) {
  var self = this;
  var a    = ko.mapping.fromJS( data, { observe: "a"} );

  return a;
}

var vm1 = viewModel( data1 ); // works

我的模型中有两个属性(a和b),但我只需a要是可观察的,而b应该只是复制到viewmodel.

遗憾的是,如果数据结构变得更深,它就不会那么好用:

var data1 = { // works
  a: "a",
  b: …

我在我的单页应用程序中使用knockoutjs,我目前陷入了一个神秘的问题.

我试图显示一个下拉菜单,并使用敲除绑定填充它.为此,我使用了一个遍历所有元素的foreach:

<div data-bind="foreach: favPlaces" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a data-bind="text: name, click: $parent.openInfoWindow" class="dropdown-item">Place Name</a>
</div>

然后,在我的viewModel中,我有openInfoWindow函数(应该在单击下拉项时调用):

// View Model
var TokyoViewModel = function() {
    var self = this;

    // All the favorite places
    this.favPlaces = ko.observableArray([]);
    mFavPlaces.forEach(function(place) {
        self.favPlaces.push(new FavPlace(place));
    });

    this.openInfoWindow = function(favPlace) {
        console.log("Success!");
    }

}

问题是,当我添加click:openInfoWindow绑定到dropdown-item元素时,我收到以下错误:

Uncaught TypeError: Unable to process binding "foreach: function (){return favPlaces }"
Message: Unable to process binding "click: function (){return $parent.openInfoWindow }"
Message: u(...).bind is not a function
    at Object.p (knockout-3.4.1.js:17)
    at …

我试图使用knockout.js与MVC3,我继续得到错误:

未捕获的TypeError:无法调用undefined的方法'remove'

设置是我有一个我需要添加和删除的UL列表:

<ul data-bind="foreach: Interviewees">
   <li>
       <div>
           <a data-bind="click: $root.removeInterviewee" class="xOut"></a>
        </div>
       <div>
          <h2>
              <span data-bind="text: FirstName"></span>
               <span data-bind="text: LastName"></span>
          </h2>
      </div>
   </li>
</ul>

这是javascript部分有淘汰的东西:

function SomeThingee(Id, SomeThingeeId, firstName, lastName, title, email) {
        this.Id = Id;
        this.SomeThingeeId = SomeThingeeId;
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Title = title;
        this.Email = email;
    }

    var viewModel = ko.validatedObservable({
        addSomeThingee: function () {
            if (!viewModel.isValid()) {
                viewModel.errors.showAllMessages();
                return false;
            } else {
                var newSomeThingee = new SomeThingee(this.Id(), 0, this.FirstName(), this.LastName(), this.Title(), this.Email()); …

我可以让它为文本工作,但不能启用它所以它读取HTML的图像 - http://jsfiddle.net/BgQPF/

<p> Current Radiobutton Value = <span data-bind='text: selected' ></span></p>

<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='<img src="https://github.com/gentoo90/minimal-django-file-upload-example/diff_blob/9ab39c7fe5abaf00f2d586e88e79a5a85075179e/src/for_django_1-3/myproject/media/documents/2012/07/12/example02.jpg?raw=true">' /> Yes
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='N' /> No
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='M' /> Maybe