标签: htmlbars

我正在尝试将静态类'form-control'和动态属性值'color'绑定到输入助手的class属性,但是,我正在使用的语法只将它输出到呈现的DOM元素

class="form-control {{color}}" 

没有实际将'color'的值绑定到class属性.我知道这是用HTMLBars绑定普通DOM元素中的静态和动态类的方法,但对于使用花括号的元素有不同的语法吗？

我正在使用的语法:

{{input class="form-control {{color}}" value=property.value type="text"}}

我有一些像这样的文本输入助手

{{input type="text" valueBinding="name" focus-out="focusOutName"}}

我刚刚将Ember升级到1.11.0,现在得到这个弃用警告:

弃用:您尝试通过将valueBinding传递给视图助手来呈现视图,但不推荐使用此语法.你应该使用value=someValue.

但是,在使用值时,它不受控制器的约束,value只需将文本设置为任何值即可.

我该如何正确绑定它？

我是Ember的新手(使用版本0.2.3).我有一个具有一些计算值的组件.他们从输入字段收集这些计算值:

export default Component.extend({
  loanAmount : 200000,
  deductible : 0,
  debtInt : 5,

  getLoanCosts: computed('loanAmount', 'debtInt', function(){
    return (get(this, 'debtInt')/12) * get(this, 'loanAmount');
  })

在我的template.hbs上,我有一个输入字段{{ input value=loanAmount }},我可以{{getLoanCosts}}在我的template.hbs中调用,以显示计算的成本.这适用于文本/数字输入.

但是,我需要一个带有两个值的单选按钮输入(是和否).这应该与deductible我的组件中的值对齐(即这笔贷款可以扣除吗？).但是,如果我这样做:

Yes {{ input type="radio" name="deductible" value=deductible }}
No {{ input type="radio" name="deductible" value=deductible }}

我无法为这两个输入设置值,就像我可以使用直接HTML一样.如果我设置value = 0和value = 1,它们永远不会在我的组件中更新.如何deductible根据是或否选择更新我的组件？

为了使ember-2.0角度支架组件能够与最新的ember-cli一起使用,我还需要什么

我使用ember-cli 0.27,nodejs 0.12.4和emberjs-canary分支来测试emberjs-2.0.

我创建了一个简单的新骨架应用程序:

  ember new test-app

并创建了一个组件:

    ember g component my-test

在application.hbs中,如果我添加以下行来调用组件,则不会显示组件中的内容.

    <my-test  />

如果将上面的行更改为下面的行,则会显示该组件的内容.

{{my-test}}

这是我的bower.json的摘录

    {
      "name": "em",
      "dependencies": {
         "ember": "components/ember#canary",
         "ember-data": "components/ember-data#canary",,
         "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
         "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
         "ember-data": "1.0.0-beta.18",
         "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
         "ember-qunit": "0.3.3",
          "ember-qunit-notifications": "0.0.7",
          "ember-resolver": "~0.1.15",
          "jquery": "^1.11.1",
         "loader.js": "ember-cli/loader.js#3.2.0",
         "qunit": "~1.17.1"
   },
   "resolutions": {
       "ember": "canary",
       "ember-data": "canary"
     }
   }

这是我的包,json

  "devDependencies": {
     "broccoli-asset-rev": "^2.0.2",
     "ember-cli": "0.2.7",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-babel": "^5.0.0",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
     "ember-cli-htmlbars": "0.7.6",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": …

我的路由中有一个哈希定义为:

model: function() {
  return Ember.RSVP.hash({
    signedServices: {
      lyft: false,
      uber: false,
      postmates: false,
      doordash: false,
      caviar: false
    }
  });
},

在我的车把视图中,我正在迭代我的所有服务并输出哈希的值:

{{#each (signup-services-array model.signedServices) as |serviceName|}}
  {{model.signedServices[serviceName]}}
{{/each}}

但是,我一直遇到错误:

Parse error on line 108:
...        {{log model.signedServices['lyft
-----------------------^
Expecting 'ID', got 'INVALID'

这个错误意味着什么,我该如何解决？

如何if在输入助手中使用condition子句.

我试过了:

{{input class="{{if errors.name "style-error"}}" }}

它造成了建筑错误.

在errors.name这里是从控制器属性.

我认为它是嵌套的双花括号导致语法错误,但不知道如何实现此条件类声明.

想象一下,我有一个Ember组件,为了这个问题的目的只是将其内容包装在一个div,添加一些文本:

<div class="Component">
  Value is: {{yield}}
<div>

所以我称之为

{{#component}}
  {{model.text}}
{{/component}}

一切都很好.但是,如果model.text为empty/null/undefined,我根本不想生成该<div class="Component">部分.我怎样才能做到这一点？我当然能做到

{{#if model.text}}
  {{#component}}
    {{model.text}}
  {{/component}}
{{/if}}

但这似乎有些重复.

我真正想做的是能够将组件定义为等效的

{{if yield}} {{! made-up syntax; of course it doesn't work }}
  <div class="Component">
    Value is: {{yield}}
  <div>
{{/if}}

或者,也可以在component.js中

yieldNotEmpty: Ember.computed.bool('yield') // made-up syntax; doesn't work

然后在组件的template.hbs中

{{if yieldNotEmpty}}
  <div class="Component">
    Value is: {{yield}}
  <div>
{{/if}}

有关如何处理此案的任何想法？

当点击"编辑"触发动作"编辑":

  {{#link-to "pages.show" page class="list-group-item"}}
    {{page.name}}
    <span class="badge" {{action "edit" page preventDefault=false}}>edit</span>
  {{/link-to}}

然后触发动作(例如打开编辑页面),但是在下一秒,链接到重定向完成,所以我最终在"pages.show"路线上.

预期:仅调用"编辑"操作,并且单击事件(？)不会"冒泡"到链接到帮助程序.

使用侧注 Ember 2.2,上面的模板是组件的一部分.

PS:我认为在一个动作中使用preventDefault = false会停止这种行为 - 但很明显,链接帮助器从其他地方获取信息.

我想在运行时,在Ember的客户端上动态编译(然后渲染)HTMLBars模板.我怎样才能做到这一点？

我只是想知道,有什么方法可以实现以下目的.

<button class="{{unless publishable "button-disabled"}}" {{if publishable (action "publish")}}>Publish</button>

当然,它可以用动作方法完成.我认为如果可以在模板中完成,它可以使代码更干燥.

注意:

• 我知道上面的代码不起作用.它仅用于目的说明.
• 我知道按钮可以使用disabled属性来实现这一点.在我原来的作品中,它实际上是一个<a/>没有的作品disabled.我需要将它作为<a/>css用途的标记.
• 我希望将按钮保留在页面中,无论它是否被禁用.这是一种网页惯例.在这种情况下,用户将知道在禁用按钮时他必须丢失某些内容.