ajax调用后敲除模板绑定元素不可用

我无法绑定由afterRender事件中由AJAX调用触发的Knockout模板创建的元素。正如你在Fiddle中看到的那样，结果可以正确显示，但是在afterRender事件处理程序中，元素仍然不可用。ajax调用后敲除模板绑定元素不可用

问题...

如何模板甚至正常显示，因为它不会出现在一个AfterRender事件处理程序运行时已经呈现？
为什么AJAX调用会影响结果？如果您取消注释AJAX调用上方的行，则模板元素可在afterRender事件中使用。

这里是代码...

HTML

<div id="plugin" data-bind="template: { name: 'fooTemplate', data: $data, afterRender: postProcess }"></div> 
<br /> 
<br /> 
<hr /> 
<div id="results"></div> 

<script type="text/html" id="fooTemplate"> 
    <div data-bind="foreach: items()"> 
     <span data-bind="text: displayText"></span> 
    </div> 
</script>

JAVASCRIPT

var data = { 
    items: [{ 
     displayText: 'Name', 
    }, { 
     displayText: 'Last Login Date', 
    }, { 
     displayText: 'Email', 
    }] 
}; 

function DataModel() { 
    var self = this; 
    self.items = ko.observableArray([]); 
    self.data = ko.dependentObservable(function() { 
     //self.items(data.items);// <<== UNCOMMENT THIS LINE AND THE postProcess FUNCTION SHOWS FULLY RENDERED DOM 
     $.ajax({ 
      url: '/some/path', 
      error: function() { 
       self.items(data.items); 
      } 
     }); 
    }); 

    postProcess = function() { 
     $('#results').text($('#plugin').html()); 
    } 
} 

dataModel = new DataModel(); 
ko.applyBindings(dataModel);

一个音符......小提琴使一个AJAX调用一个虚假的地址。这是小提琴没有服务器依赖。错误属性用于更改导致模板运行的数据。但是，在我的开发环境中，调用有效的url会产生与小提琴中显示的结果相同的结果。另外，我没有使用从服务器返回的数据来加载模板。相反，小提琴在顶部使用一个静态定义的数据源（同样只是为了演示问题）。

来源

2013-02-18 John Livermore

看着你的例子，你遇到了一个异步问题。

这里的流动是如何工作的，而不$就电话：

的dependentObservable火灾更新值
的self.items被用新值
模板呈现
更新postProcess方法被调用并且一切看起来都很好。

但随着$就调用，完成（错）方法的回调，所以流量的变化：

的dependentObservable（！使用ko.computed代替）触发更新值
$ .ajax调用服务器。
完成（或错误）回调已完成排队。
模板呈现
postProcess方法被调用但self.items仍然是空的。
已完成的回调现在触发服务器响应并更新self.items
呈现的模板仍然绑定到您的viewmodel，因此呈现的模板已更新。

我认为最简单的解决方法是拉你的Ajax调用你的dependentObservable的，让你注释掉的情况。

来源

2013-02-18 19:08:40

感谢您的解释。小提琴是我整体解决方案的一个简明例子，它需要AJAX从服务器获取数据。如何改变小提琴以支持使用AJAX并解决异步问题？ – 2013-02-18 19:16:24

我知道它在一个更大的应用程序中的片段。这是一个可能的工作方式的概念：http://jsfiddle.net/jeljeljel/nSPsM/ – 2013-02-18 21:49:47

谢谢，我认为这是我在原始文章中共享的小提琴。你的意思是使用不同的网址吗？ – 2013-02-18 22:38:27

ajax调用后敲除模板绑定元素不可用

回答

相关问题