【问题标题】:long ajax call breaking knockout binding长 ajax 调用打破淘汰赛绑定
【发布时间】:2013-04-09 17:23:36
【问题描述】:

我正在使用 durandal 创建一个个人网站,并使用以下代码敲除以绑定编辑博客页面。一切都很好,我能够将文本区域与 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 when uncommented!!!
            return ConvertToModel(_blogRepository.ById(id));
        }

        private BlogModel ConvertToModel(BlogPost b)
        {
            return new BlogModel { DateCreated = b.DateCreated, Title = b.Title, Content = b.Content, Id = b.Id };
        }
    }

html

<section>
    <div class="row">
        <textarea class="sceditor span12" data-bind="html: post.content"></textarea>
    </div>
    <div class="row">
        <button type="button" class="btn offset10 span1">Cancel</button>
        <button type="button" class="btn btn-primary span1">Save</button>
    </div>
</section>

【问题讨论】:

  • 是否存在绑定错误?你可以试试var postObservable = ko.mapping.fromJS({ content: ''});
  • 没有绑定错误。如果 Thread.Sleep(1000) 不存在,它会完美运行。

标签: knockout.js asp.net-web-api knockout-mapping-plugin durandal


【解决方案1】:

ajax 调用是一个异步任务,因此您应该返回一个 Promise。这样做会让 Durandal 等到 ajax 调用完成。

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

【讨论】:

  • 工作就像一个魅力,谢谢!我花了一段时间才看到代码的差异,所以对于那些有类似问题的人,只需在 ajax 前加上一个 return ,它就会同步执行。
猜你喜欢
  • 1970-01-01
  • 2013-02-04
  • 2015-05-28
  • 2013-10-31
  • 2013-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-13
相关资源
最近更新 更多