【问题标题】:How to add a function to a mapped object?如何将函数添加到映射对象?
【发布时间】:2012-08-24 13:14:49
【问题描述】:

我从服务器获取了一个对象数组,我想向其中添加方法。在下面的示例中,我希望它被称为 doAlert。当我尝试使用 data-bind="click: doAlert" 绑定到 doAlert 时,剔除会引发异常。我怀疑我添加的功能是错误的,所以任何建议都将不胜感激。谢谢

   $(document).ready(function () {
    var url = GetUrl();
    $.getJSON(url, function (data) {

        var mapping = {   
            doAlert: function (options) {
                alert('test');    
            }
        }

        var viewModel = ko.mapping.fromJS(data, mapping);
        ko.applyBindings(viewModel);
    });
});


<ul data-bind="foreach: $data">
<li>
    <span data-bind="text: Title"></span>
    <div class="btn-group" style="display:inline">
        <a class="btn-small btn dropdown-toggle" data-toggle="dropdown" href="#">Action
                    <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <a data-bind="click: doAlert"><li>Edit</li></a>
            <a><li>Delete</li></a>
        </ul>
    </div>
</li>

【问题讨论】:

    标签: knockout.js knockout-mapping-plugin


    【解决方案1】:

    查看此JsFiddle Demo

    我为演示稍微更改了您的 viewModel,但您的 html 保持不变。

    您需要在映射中定义一个创建函数。

    // Fake Data for demonstration
    var fakeData = [{
        "id": 1,
        "Title": "C++"},
    {
        "id": 2,
        "Title": "Java"},
    {
        "id": 3,
        "Title": "JavaScript"},
    {
        "id": 4,
        "Title": "Scala"},
    {
        "id": 5,
        "Title": "Python"}
    ];
    
    
    function Model() {
    
    var self = this;
    
    // You are using foreach syntax so we need to define an observableArray
    this.dataArray = ko.observableArray([]);
    
    this.loadData = function() {   
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: ko.toJSON(fakeData)
            },
            success: function(data) {
    
                var mapping = {
    
                    create: function(options) {                  
                        options.data.doAlert = function() {
                            alert(options.data.Title);
                        }
                        return options.data;
                    }
                }
                // Map returning object into the our dataArray
                ko.mapping.fromJS(data, mapping, self.dataArray);
            },
            dataType: 'json'
        });
    }
    }
    };
    
    var viewModel = new Model();
    ko.applyBindings(viewModel);
    viewModel.loadData();​
    

    传递给创建函数的选项参数有一些属性。我们可以通过 options.data 属性访问我们的数据。在mapping documentation查看有关选项参数的更多信息

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-07-14
      • 2022-12-05
      • 1970-01-01
      • 2014-02-19
      • 1970-01-01
      • 1970-01-01
      • 2017-02-19
      • 1970-01-01
      相关资源
      最近更新 更多