标签: knockout-mapping-plugin

可能重复:
Knockout.js在半大数据集下非常慢

我在我的模型中有以下事件,如果我只有一些记录,但如果我得到几十条记录,那么IE可以正常工作,那么我认为我的脚本运行得太慢了.

    self.getTrades = function () {

    $.ajax({

        type: "GET",
        cache: false,
        url: "/_vti_bin/DBOrderService/DBOrderService.svc/GetTradesByDateSource?format=json&traddate=" + self.selectedDate() + "&source=" + self.selectedSource(),
        success: function (data, textStatus, jqXHR) {
            if (data.requeststatus.code === 1) {
                var statusId = SP.UI.Status.addStatus(data.requeststatus.message);
                SP.UI.Status.setStatusPriColor(statusId, 'red');
                return;
            }
           debugger;
           ko.mapping.fromJS({ trades: data.trades }, mappings, self); //too slow, events are firing as items are added
            self.selectedTrade(null);
        },
        error: ajaxError
    });
};

我认为这是因为映射会在添加每行时触发更改通知,因此我想将"批量"新行复制到我的模型中.

我试过了

 var temptrades = ko.mapping.fromJS(data.trades, mappings);
 self.trades=temptrades();

和

self.trades(temtrades);

和

self.trades(temptrades();

但他们都只是夸大我的模型.什么是将ko.mapping创建的可观察数组一次性复制到我的模型中的正确方法.ko.mapping上是否有选项可以防止触发事件直到结束？

我想将这个json映射到自定义对象.问题是项目不是Itemof对象而是普通对象.我在这里缺少什么？

你可以在这里测试:http://jsfiddle.net/5jhpE/

var json = [
    {
        id: 1,
        items: [
            {id: 1, name: 'item1'},
            {id: 2, name: 'item2'},
            {id: 3, name: 'item3'}
        ]
    },
    {
        id: 2,
        items: [
            {id: 4, name: 'item4'},
            {id: 5, name: 'item5'},
            {id: 6, name: 'item6'}
        ]
    },
]

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

function Item(data) {
    ko.mapping.fromJS(data, {}, this);
}
var map = {
    create: function(options) {
        return new Data(options.data);
    },
    items: function(options) {
        return new Item(options.data);
    }, …

TypeScript 编译器生成的 JS 代码有问题。对于这样的类：

// Class
export class UserDTO {
    Id: number;
    FirstName: string;
    LastName: string;
    DateOfBirth: Date;

    getFUllName(): string {
        return this.FirstName + ' ' + this.LastName;
    }        
}

TypeScript 生成以下代码：

define(["require", "exports"], function(require, exports) {
    // Class
    var UserDTO = (function () {
        function UserDTO() {
        }
        UserDTO.prototype.getFUllName = function () {
            return this.FirstName + ' ' + this.LastName;
        };
        return UserDTO;
    })();
    exports.UserDTO = UserDTO;
});
//@ sourceMappingURL=TestClass.js.map

上面的代码不包含未使用（未引用）的字段，但我在某些“对象到对象”映射案例中需要它们。是否可以强制编译器始终生成它们？

我使用的是 Visual Studio 2012 的 TypeScript 0.9.1。这是我的编译器选项：

<TypeScriptTarget>ES5</TypeScriptTarget> …

编辑看起来我现在从服务器加载它.如果有人发现任何问题,我们很乐意听到他们的消息.

有一些问题让淘汰映射插件工作.我可以使用静态数据,没有任何问题,请参阅http://jsfiddle.net/RH9wQ/

当我尝试从服务器加载数据时,它似乎不起作用.下面是我正在使用的简单代码.jsfiddle中的数据是从我的服务器返回的确切数据.我错过了一些完全明显的东西吗

我正在做的是根据点击的alpha按钮加载不同的药物.因此,单击"y"并获取以y开头的药物列表,单击"z"并获取以z开头的药物列表.单击按钮/加载数据时,我想用来自服务器的内容替换我的viewModel数据.

另外,请注意jsfiddle页面上的控制台,数据看起来很好(8个数组元素和count = 8),但请注意viewModel的控制台,preferredDrugs和count是不同的,有人知道这是为什么吗？

$(function() {
    $('.load').click(function() {
        var $letter = $(this).attr('value');

        //show spinner
        $('#loading').show();

        //load in drug list data
        $.getJSON('/PreferredDrugList/service/preferredDrugs/' + $letter, function(data) {
            //hide spinner
            $('#loading').hide();

            console.log(data);
            //create observable properties for each of the properties on data
            ko.mapping.fromJS(data, viewModel);
            console.log(viewModel);

        });
    });

});//end ondomready

//default data
var data = {
    preferredDrugs: [],
    count: 0
};

var viewModel = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);

我正在使用knockout和映射插件来自动创建我的视图模型.我在视图模型中有一堆金额,我绑定到文本框.当用户更改文本框中的金额时,我想要的是确保他们输入的是一个数字,并且它大于0,如果不是,我想用0替换他们输入的内容.这似乎是它应该很简单......使用自定义绑定或订阅功能.

我正在阅读的关于敲门验证的所有内容都涉及扩展器和读/写计算的observable,或者添加另一个插件(例如jquery验证).对于这种情况,它们似乎都有点过分,并且必须为要验证的每个observable显式声明扩展器/计算的observable.我有很多使用映射插件自动创建的金额,所以这似乎不合理.

任何帮助将不胜感激!

我正在寻找一个例子,我可以将observableArray显示为具有编辑/删除链接的普通文本.可以从单独的表单添加/编辑项目.我无法从编辑链接编辑记录添加新记录!

 self.editItem = function (p) {
        //edit code
        ////???????
    };

Run Code Online (Sandbox Code Playgroud)

这是一个例子

我正在创建一个使用durandal和knockout的个人网站,并使用以下代码绑定编辑博客页面.一切都很好,我能够将文本区域与ajax调用的返回文本绑定.

一旦完成这一点,我很好奇,如果Web服务的长响应会破坏它,所以我在服务中放入一个Thread.Sleep(1000),现在我无法将它返回到文本区域.有关如何使其工作的任何建议???

旁注:我不认为这与durandal框架有关,但我认为我会包括我是它

JavaScript的

define(['services/logger', 'services/wysiwyg'], function (logger, wysiwyg) {

var postObservable = ko.mapping.fromJS({});
var vm = {
    activate: activate,
    post: postObservable,
};
return vm;

function activate(routeData) {
    var id = routeData.id;
    $.ajax(
        {
            type: "GET",
            url: '/api/blog/get',
            data: { id: id },
            dataType: "json",
        })
    .then(function(data){
        ko.mapping.fromJS(data, postObservable);
    });

   }

});

C#

    public class BlogController : ApiController
    {
        public IBlogRepository _blogRepository;
        public BlogController(IBlogRepository blogRepository)
        {
            _blogRepository = blogRepository;
        }

        public BlogModel get(int id)
        {
            //Thread.Sleep(1000); <-- breaks …

我正在尝试使用KnockoutJS和Knockout Mapping将数据绑定到ASP.NET Webforms Application

HTML

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.3.0.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">

    function bindModel(data) {
        var viewModel;
        viewModel = ko.mapping.fromJS(data);
        console.log(viewModel);
        ko.applyBindings(viewModel);
    }

    $(document).ready(function () {
        $.ajax({
            url: "TestPage.aspx/GetItems",
            data: {},
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            timeout: 10000,
            success: function (result) {
                bindModel(result);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    });
</script>
...
<table>
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr> …

我正在尝试创建一个KnockoutJS视图模型,它模拟客户订单和许多订单商品.我想加载初始数据,并验证数据.

到目前为止,我可以使用knockoutjs.mapping加载数据,验证使用映射添加的数据.

// data to load into viewmodel
var modeldata = {
  "OrderID":1,
  "ReturnString":null,
  "CustomerName":"First Customer",
  "OrderDate":"2013-09-16T19:41:40.1639709+01:00",
  "OrderItems": [
     {"ItemID":0,
      "ItemName":"Name_0",
      "ItemPrice":0.0,
      "_destroy":false
     },
     {"ItemID":1,
      "ItemName":"Name_1",
      "ItemPrice":10.0,
      "_destroy":false
     },
     {"ItemID":2,
      "ItemName":"Name_2",
      "ItemPrice":20.0,
      "_destroy":false
     }
   ]
};


// setup defaults for validation
var validationOptions = {
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'errorCSS',
    messagesOnModified: true,
    debug: true,
    grouping: {
        deep: true,
        observable: false //Needed so added objects AFTER the initial setup get included
    },
};

ko.validation.init(validationOptions);


// define array model
var Item …

根据我在运行它时创建的这个Fiddle,它没有按预期将值绑定到"no Blue"选项.

var viewModel = {    
    isBlue: ko.observable(false)
    //isBlue: ko.observable("false") this works
};

正如我在那里提到的,当我传递一个字符串值"false"时,它会进行绑定.很明显,淘汰赛也会进行类型比较.

在我的应用程序中,我使用komapper创建视图模型.对于boolean属性,它创建bool值并在bool中初始化变量.我需要将它们转换为字符串吗？在输入单选按钮元素中,我们将始终使用字符串值.我可以为复选框使用布尔值吗？

我试过"checkedValue"仍然没有运气.