标签: knockout-mapping-plugin

我想从列表中删除一个项目.我正在使用knockout.js与映射插件.我的代码看起来像这样:

序列化为Json

@{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model));}

模板

<script type="text/html" id="imgsList">
    {{each model.Imgs}}
        <div style="float:left; margin: 10px 10px 10px 0;">
            <div><a href="${Filename}"><img src="${Filename}" style="width:100px;"></img></a></div>
            <div data-bind="click: deleteImage">Delete</div>
        </div>
    {{/each}}
</script>

KO JavaScript

<script type="text/javascript">
     $(function() {
        //KO Setup
        var viewModel = { 
            "model": ko.mapping.fromJS(@jsonData),
            "deleteImage" : function(item) {alert(item.Filename + ' deleted.');}
        }

        ko.applyBindings(viewModel);
    });
</script>

HTML

<div data-bind="template: 'imgsList'"></div>

问题

一切都按预期工作.但是,当您单击按钮项时,将显示带有删除按钮的图像列表.未定义文件名.思考？

编辑:取自KNockout.js手册:"当调用你的处理程序时,Knockout将提供当前模型值作为第一个参数.如果你为一个集合中的每个项目渲染一些UI,这是特别有用的,你需要知道哪个项目的用户界面被点击了."

看来我没有收到我期待的Img对象.我不知道我要回来了!

我遇到了Knockout映射插件的一个奇怪问题.

如果我通过映射填充可观察数组,我无法迭代数组或获取其长度,即使UI正确更新,数组似乎是空的.

你可以在这里找到一个有用的jsFiddle:http://jsfiddle.net/VsbsC/

这是HTML标记:

<p><input data-bind="click: load" type="button" value="Load" /></p>
<p><input data-bind="click: check" type="button" value="Check" /></p>
<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: value"></td>
        </tr>
    </tbody>
</table>
<p data-bind="text: total"></p>

这是JavaScript代码:

var ViewModel = function () {
    var self = this;
    self.items = ko.observableArray();
    self.load = function () {
        self.items([
            { "name": "joey", "value": 1 },
            { "name": "anne", "value": 2 },
            { "name": "paul", "value": 3 },
            { "name": "mike", "value": 4 } …

我写了以下代码

$(function() {



    function get_updates () {
        $.getJSON('/new-lines.json', function(data) {
            var fullViewModel= ko.mapping.fromJS(data);
            ko.applyBindings(fullViewModel)


        });
    }

    function poll()
    {
        setTimeout(function(){
        get_updates();
        poll();},3000)

    }




    poll()
});

JSON数据如下所示:

{"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"}

我应该怎么写这个html部分？

我是javascript的新手.请帮忙.

我正在使用knockoutjs和映射插件从服务器调用返回的JSON生成视图模型.我从服务器获取一个数组,创建一个将映射数组作为属性的模型,然后数据将数组绑定到模板以呈现屏幕上的所有数据.哪个效果很好.

我希望每个项目旁边都有一个按钮,可以将其删除,就像在此视频中的示例一样(参见14:20左右).

但是在视频中,他绑定了一个在数组元素上定义的函数.我的元素是使用映射插件从JSON生成的,所以我不确定如何向每个元素添加一个函数,或者我是否想要这样做.或者,我可以单击按钮绑定到viewmodel上的函数并传入与该按钮关联的元素的id吗？

我的javascript:

<script type="text/javascript">
    var supplierModel;

    $(function(){        
        getAllSuppliers();       
    })

    function getAllSuppliers(){
        $.getJSON('/SWM60Assignment/allsuppliers',function(responseData){
            supplierModel = new SupplierModel(responseData);
            ko.applyBindings(supplierModel);            
        });
    }
    var SupplierModel = function (supplierList) {
        var self = this;

        self.suppliers = ko.mapping.fromJS(supplierList);
        self.remove = function(supplierId){
            // how can I get the buttons to call this method with the id 
            // of the element they are the button for?
            alert('remove called with supplier id:'+supplierId);
        }
    };
</script>

这是模板:

<script id="supplierTemplate" type="text/html">
    <li>
        Name: <span data-bind="text:name"></span> Address: <span …

我是新手使用淘汰赛,我正在尝试使用淘汰验证插件和映射插件.我在视图模型对象上遇到了isValid函数的问题.根据文档,isValid应该返回一个bool来确定视图模型上的任何可观察对象是否有效但是当我调用它时我得到一个错误,说isValid不是一个函数.但是,如果我在observables上调用isValid它可以正常工作.问题是我正在使用映射插件和我从服务器获得的一些动态数据对象,因此我不一定知道我需要验证的observable的名称,因此单独验证它们是不可行的.以下示例已经过简化,但在实际实现中,我不知道可观察对象的名称.也许我刚刚错过了一些文档？

谢谢你的时间.

这确实有效

    var dataItem = { FirstName: '', LastName: '', Age: '', Email: '' }


    var viewModel = function(data) {

        var self = this;
        this.Email = ko.observable().extend({ email: true });
        this.LastName = ko.observable().extend({ required: true });
        this.Age = ko.observable().extend({ required: true, min: 0 });
        this.saveClick = function () {

            if (!self.Email.isValid() || !self.Age.isValid() || !self.LastName.isValid()) {
                alert('Not valid');
            else {

                alert('Valid');
            }
        };
        this.cancelClick = function () {

            ko.mapping.fromJS(dataItem, null, this);
        }

        ko.mapping.fromJS(data, {}, this);
    };

    var viewModelInstance = …

我有一个像下面这样的对象.

var order = function (data) {
    this.OrderId = data.Id;
    this.CustomerName = ko.observable(data.CustomerName);
    this.CustomerAddress = ko.observable(data.CustomerAddress);
    this.CustomerPhone = ko.observable(data.CustomerPhone);
    this.TotalPrice = ko.observable(data.TotalPrice);
    this.Cancelled = ko.observable(data.Cancelled);
    this.Pizzas = ko.observableArray();
};

在我的VM中:

var currentOrder = new model.Order({});

当从UI修改此对象时,一切正常.当我想将此对象传递给我的数据层以保存时,我的问题就出现了.它来自:

显然,我无法将其传递给我的数据层.有没有一种简单的方法可以在不手动编写大型映射器的情况下去除所有淘汰内容的复杂对象？

问题

我正在尝试将修改后的viewModel发送回我的服务器.不幸的是,我必须使用ko.mapping.fromJSON()和一些mappingOptions 创建我的viewModel,它工作正常.现在我需要一种简单的方法将创建的viewModel转换回原始方案.

期望的结果

我想转换这个:

var myModel = {
    simpleProp: "test",
    complexProp: {
        simpleProp2: "test2",
        simpleProp3: "test3"
    }
};

进入(JS):

var myModel = {
    simpleProp: "test",
    modifiedToSimpleProWithNewName: "test2"
};

给我这个JSON:

{"simpleProp":"test","modifiedToSimplePropWithNewName": "test2"}

尝试

我在想,因为ko.mapping.toJSON有一个映射参数,就像为这个方法创建另一个映射一样简单.但似乎ko.mapping实际上忽略了我的自定义属性创建:

var mappingOptions = {

    // ignored
    'simpleProp': {
        create: function (thing) {
            return "Changed simpleProps value";
        }
    },

    // working
    ignore: ["simpleProp3"]

};

更多的信息

我为你创造了一个jsFiddle.

请注意:我已经简化了使用fromJSON删除模型生成的示例:

// created and modified by ko.mapping.fromJSON - with custom mapping!
var myModel …

这是我的jsfiddle插图:http: //jsfiddle.net/hawaii/gN6CT/10/

我有一个json对象列表,我想使用jquery模板绑定到ul中,在每个li中我都有一个每个项目的复选框,以及项目详细信息.我希望它的工作方式是:

当用户单击复选框时,该项目将更新为选定的列表(此工作正常)

当用户点击项目的详细信息时,该项目将是所选项目,我将在右侧显示所有详细信息.这就是我将项目细节放在元素中的原因.

正如您从小提琴中看到的那样,它不按照我希望的方式工作,即使首次应用viewModel也会调用click绑定,当我单击复选框时,它也会调用click事件.

请你淘汰大师帮我吧.谢谢

小提琴可以在这里找到.

我正在添加一个由它映射的可观察数组ko.mapping.fromJS().

在我看来,我正在使用数组上的属性构建一个URL attr: { href: '/Users/Summary?userId=' + ID() }.

如果我想在我正在使用的数组中添加一个项目self.Users.push().

如果我这样做,我会收到错误ID is not a function.

所以我的问题是将数据添加到数组的正确方法,还是我没有href正确构建attr？

我正在使用knockout.mapping将我的javascript对象转换为knockout observable.在这个javascript对象里面是一个嵌套对象,这个嵌套对象正在被转换,但它在错误的地方.因此,当我的视图尝试绑定数据时,它不能,因为映射已将嵌套对象移动到根.

JSON数据

[
    {
        "brandName": "Knockando Single Malt Whisky",
        "categoryDescription": "Alcohol - Whisky & Bourbon",
        "dateAmended": "2008-01-28T10:05:00.000Z",
        "defaultSearchName1": "KnockandoSingleMaltWhisky",
        "defaultSearchName2": "Knockando Single Malt Whisky",
        "advertiser": {
            "activities": "Motor dealers",
            "additionalInfo": "",
            "advertiserName": "Parks of Hamilton Ltd",
            "alfRank": 3311,
            "cinemaRank": 286,
            "directMailRank": 1291,
            "internetRank": 1988,
            "notes": "Trade as Parks Motor Group.\nAlternative email: coachhire@park.uk.com, admin@park-uk.com, Info@park.uk.com.",
            "numberOfEmployees": 1000,
            "outdoorRank": 1426,
            "pressRank": 5159,
            "radioRank": 675,
            "tVRank": 1810
        }
    },
    {
        "brandName": "Tesco Petrol/Diesel Fuel",
        "categoryDescription": "Petrol & Service Stations",
        "dateAmended": "2013-07-10T15:17:00.000Z",
        "defaultSearchName1": …