【问题标题】:Action in handlebars template not firing车把模板中的操作未触发
【发布时间】:2012-02-28 09:31:38
【问题描述】:

我有以下简单代码:

(JSFiddle)http://jsfiddle.net/aR2UX/3/

无论我做什么,模板中的动作都不会触发。我怀疑这是由于视图的呈现方式,但无论我读到什么,我都无法理解它。

我仍在尝试理解 ember 视图,但从我阅读的内容来看,我在小提琴中的代码应该可以工作。好像没有,谁能帮帮我?

(这是在 rails 3.2 应用程序中,使用 ember-rails、ember 0.9.4 和车把模板 gem,顺便说一句)。

非常感谢任何帮助,因为我为这个项目在 ember 上冒了一点风险。

【问题讨论】:

    标签: javascript ember.js handlebars.js dom-events


    【解决方案1】:

    这并没有回答 OP 的原始问题,但它与标题相符,如果您遇到此问题,那么搜索引擎会将您指向此页面。以下是操作可能不会触发的一个可能原因:标签可能不在 Ember 应用程序的 rootElement 中。所以如果你有 JS

    FooApp = Ember.Application.create({
      rootElement:"#foo",
      test: function() {
        alert("testing");
      }
    });
    

    和车把

    <div id="foo"></div>
    <a {{action "test" target="FooApp"}}>Fail</a>
    

    然后什么都不会发生。让我困惑了好几个小时。

    【讨论】:

    • 谢谢!它有帮助!我制作了 Ember.Application.create({rootElement:"body")。所有活动开始工作。
    • 真的节省了我很多时间!谢谢!我有一个动态附加到 DOM 树的视图,但之前没有触发任何“动作”。我的解决方法是 theView.appendTo(App.rootElement) 并且效果很好!
    【解决方案2】:

    由于车把模板没有名称,因此它们会在声明它们的位置插入到 DOM 中——这就是为什么你什么都看不到的原因。

    这个:

    {{#each content}}
    {{view Skills.RecommendedSkillView skillBinding="this"}}
    {{/each}}
    

    不会为您做任何事情,因为此时未定义 content,并且车把模板与视图无关。

    同样:

    Skills.RecommendedSkillsListView = Ember.View.extend({
        templateName: 'app/templates/recommended_skills_list',
    

    对您没有帮助,因为 templateName 指向一个不存在的车把模板,并且视图类永远不会被实例化(否则您会收到缺少模板的警告)。

    此外:

    <td><a href="#" {{action "a"}}>DO A THING</a></td>
    

    不会调用函数a,因为这个模板只是在遇到它的DOM中插入一次,并且a没有在那个上下文中定义(skill也没有)。

    最后,当你确实让你的代码更接近你想要的工作方式时,会出现一个问题,即每个把手模板默认情况下都包含在div 中。因此,您的表将在每个tr 周围有div。这可以通过更改tagName:http://emberjs.com/#toc_36来解决

    【讨论】:

    • 马丁,当您发布您的解释时,我正在修改此示例。这是一个大大简化的工作示例:jsfiddle.net/dgeb/VAx6v 动作助手在 0.9.4 和 0.9.5 之间改变了行为。 event.preventDefault() 现在默认调用,jQuery 事件对象不再作为 arg 传入。相反,视图对象是。我的示例显示了如何使用它。无论如何,是时候再次更新 ember 文档了……
    • 感谢丹和马丁。我实际上确实已经命名了模板 - 我正在使用带有把手的 ember-rails,这会将每个模板编译成它自己的 JS 文件,但我认为我的问题对此不够清楚。我的应用程序中的其他所有内容都可以正常工作,但操作无效。我升级到 0.9.5 并删除了 preventDefault() 调用,一切都开始按预期运行。谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-16
    • 2016-05-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多