javascript - VueJS - 如何使用 ajax 调用的结果动态初始化模板

标签 javascript mvvm coffeescript vue.js

我想动态加载 VueJS 组件的模板。我想使用 jQuery 进行 AJAX 调用,服务器返回的任何内容都应该是 VueJS 组件的 template 。这是代码的简化版本,删除了 AJAX 调用,因为它与数据来自何处无关:

BoardFeed = Vue.extend
    template: '<div>This should be replaced</div>'
    data: ->
            return items: null
    created: ->
        @template = "<div>Template returned from server, what I really want</div>"

在上面的示例中,我使用 created我认为它适合于此,但新模板永远不会呈现,只有旧模板。

有可能实现这个目标吗?

最佳答案

您可以在模板中使用v-partial。加载部分后,您可以通过 Vue.partial() 注册它。然后替换 {{partial }} 值,从而呈现新的部分。

BoardFeed = Vue.extend
    template: '<div v-partial="{{ partial }}">This should be replaced</div>'
    partials: {"beforeLoad": "<div>This should be replaced</div>"}
    data: ->
            return {items: null, partial: "beforeLoad"}
    created: ->
        Vue.partial("afterLoad", "<div>Template returned from server, what I really want</div>")
        @partial = "afterLoad"

(请原谅任何 CoffeeScript 错误,我对此不太熟悉)

关于javascript - VueJS - 如何使用 ajax 调用的结果动态初始化模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27987937/

相关文章:

node.js - PM2 - 语法错误 : Block-scoped declarations not yet supported outside strict mode

javascript - 单击行上的 Jquery 数据表将旧数据弹出

javascript - 访问 javascript 对象属性

javascript - 获取 google api 地址值作为 javascript 函数的返回值

Silverlight 和 MV(VM) 模式 - 无代码隐藏 - 这可能吗?

AndroidViewModel 与 ViewModel

javascript - 无法使用 .map() 呈现数组值

c# - 在代码完成执行之前动态更新 WPF 窗口

自执行方法中的 Javascript 范围访问

javascript - jQuery DataTables - 在 fnDestroy (Coffeescript) 之后忽略宽度设置