标签: aurelia-binding

我在文档中看到了这个功能,但我无法弄清楚如何从该信息中使用它.

它说: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> 这在现实世界的例子中是什么样的？

我有一个名为的页面entry-main,它包含以下模板:

<template>
    <entry-search></entry-search>
    <entry-details></entry-details>
</template>

里面<entry-search>有另一个自定义元素.它看起来像这样:

<template>
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group">
                <span id="entry_search" class="input-group-addon">
                    <span class="fa fa-search"></span>
                </span>
                <!-- important part -->
                    <typeahead id="choose" placeholder="Holding the place"></typeahead>
                <!-- end of important part -->
            </div>
        </div>
    </div>
</template>

在typeahead viewmodel中,我得到了我的typeahead的值,如下所示:

$(this.id).on('typeahead:selected', function (e, item) {
       this.selected = item;
});

我现在的问题是,如何this.selected从我的entry-details-viewmodel中获取我的typeahead-viewmodel？
为了清楚起见,它应该是这样的:

<entry-main>
    <entry-search>
          <typeahead></typeahead>
    </entry-search>

    <entry-details>
          ${selected}
    </entry-details>
</entry-main>

我和队友在过去的四个月里一直在Aurelia建立一个应用程序,他和我一直在以这两种不同的方式创建和使用组件.我希望有一些一致性并将所有内容改为两种风格中的一种,但我不知道哪种风格更适合我们的需求.

我选择使用<compose>因为对我来说它感觉更干净,适合我遇到的每一个需求,但如果使用自定义元素客观上更好,我想切换到那个.

例如:

(他的观点模型:)

import { bindable, bindingMode } from 'aurelia-framework';

export class HisWay {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}

(他的观点:)

<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>

(我的观点模型:)

export class MyWay {
  activate(model) {
    this.model = model;
  }
}

(我的方式:)

<compose view-model="./my-way" model.bind="myModel" containerless></compose>

我是否需要转换,如果没有,我可以用什么理由来说服他使用我一直使用的相同风格？

更新:

其他人报告说这个样本适合他们.听起来我做错了什么但我没有代码,所以我无法检查问题是什么.

原始问题:

我有以下自定义元素与以下视图模型和视图:

import {bindable} from 'aurelia-framework';
export class Test1 {
  @bindable name = null;
}

<template>
  <div>Name: ${name}</div>
</template>

然后我使用上面的自定义元素(这是骨架项目中的欢迎页面)有一个这个视图和视图模型:

export class Welcome {
  constructor() {
    this.name = 'Test';
  }
}

<template>
  <require from="./components/test1"></require>
  <test1 name.bind="name"></test1>
</template>

我的期望是看"名字:测试",但我只得到"姓名:".如果我使用字符串并删除".bind",那么它的工作原理如下:

<test1 name="Test"></test1>

但是,每当我更新"App"视图模型中的"name"字段时,我希望它自动更新.

我不确定我做错了什么.我没有在控制台中看到任何错误.

我将此示例基于Aurelia的骨架示例项目.aurelia-framework的版本是0.11.0.

我想我可能有配置问题.循环遍历一个对象数组时出错.这是错误.正在将对象数组加载到视图中,它们看起来是正确的.它只是爆炸的"repeat.for".

Unhandled promise rejection Error: Incorrect syntax for "for". The form is: "$local of $items" or "[$key, $value] of $items".
at SyntaxInterpreter.for (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:142:13)
at SyntaxInterpreter.interpret (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:27:34)
at TemplatingBindingLanguage.createAttributeInstruction (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:267:46)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1442:41)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1353:33)
at ViewCompiler.compile (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1314:12)
at http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1583:49
at run (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/es6.promise.js:91:43)
at http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/es6.promise.js:105:11
at module.exports (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:40:9)
at Number.run (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:27:7)
at listner (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:31:9)

视图 …

我正在尝试将单选按钮'已检查'状态绑定到我的JSON对象中的布尔值,但它没有被设置.

template:(jobReadinessItems是一个"Items"数组)

<tbody>
  <tr repeat.for="item of jobReadinessItems">
    <td><input id="have" name="readiness" type="radio" checked.bind="item.Have" /></td>
    <td><input id="need" name="readiness" type="radio" checked.bind="item.Need" /></td>
</tr>

项目(json):

{     
  Have: false,
  Need: true
 }

CS

  public class JobReadinessItemDto
  {

     public bool Have { get; set; }
     public bool Need { get; set; }

   }

但是,如果我以这种方式绑定它,它会显示值(但我当然无法设置它):

 checked.bind="item.Have ? 'on' :  'off'"

为什么它显示"开/关"但不是真/假？

http://plnkr.co/edit/G5Cw9i?p=preview

代码:

我有两节课:

export class Shipment {
    shipmentId: number;
    widget: Widget;

}

export class Widget {
    widgetId: number;
    name: string;
}

然后我有一个ShipmentUi视图模型,它有一个发货实例(this.shipment).

在ShipmentUi视图中,我构建了UI的一部分,显示了允许选择Widget的WidgetUi:

<compose view-model="src/views/widgetUi" model.bind="shipment"></compose>

WigetUi的视图模型可以节省出货量.所以WidgetUi有一个this.shipment.

然后widgetUi的视图显示一个选择器:

<select value.bind="shipment.widget" >
    <option class="dropdown-toggle" repeat.for="widget of widgets"
            model.two-way="widget">${widget.name}</option>
</select>

问题设置:

在我的撰写标签中(在ShipmentUi的视图中),我宁愿绑定到shipment.widget.

这将使WidgetUi的视图模型只获得一个this.widget.(该WidgetUi课程不需要查看或了解shipment它.它的唯一功能是允许选择a Widget.它不需要关心它是用于装运还是用于其他东西.)

但是,正如我理解Javascript,这是行不通的.

因为如果我只是传递对shipment.widget的引用,那么WidgetUi将只有对widget部分的引用.起初WidgetUi this.widget将与ShipmentUi具有相同的参考this.shipment.widget.

但是当用户选择不同的小部件时,WidgetUi this.widget将获得不同的引用(对于下拉列表中新选择的小部件).但ShipmentUi的this.shipment.widget遗嘱仍将引用原始小部件.

问题:

在Javascript中绑定到子对象时,如果要了解子对象的交换,是否总是必须传入包含对象？

这个问题的原因是我的测试不是100%确定的.所以我希望有人能为我清理它.

我也希望我错了,因为我真的不喜欢必须公开包含类中的所有数据.(在这种情况下,可以shipment在WigetUi课堂上访问.)

重新询问(澄清):

Fabio Luz要求澄清我的要求.所以这是一次尝试.这将介绍上面的示例,但将其更改为我希望它工作的方式. …

我有一个所谓的聊天视图,它基本上包含一个repeat.for遍历所有消息并使用呈现消息视图的聊天视图<compose>.

问题是,一旦消息计数超过50并且用户在聊天之间导航(这会触发repeat.for更新,因为我替换VM中的数据集),它变得非常慢.

在处理这样的视图方面,我觉得我做错了.我能否就其他替代品获得一些意见？

我尝试过UI虚拟化,但不幸的是,当前的插件不支持我需要的功能(可变高度项,自底向上对齐).

我还对绑定进行了相当多的优化,大多数是一次性的,对数据集的更新都是去抖动的.但这并没有改善事情,因为主要的瓶颈是初始负载(第一次绑定视图).

谢谢!

当前方法的示例:

<li repeat.for="message of chat.messages">
  <compose  view-model.bind="getMessageViewFromMessage(message) & oneTime"
            model.bind="message & oneTime"
            containerless>
  </compose>
</li>

我正在为我的SPA 使用Aurelia Framework.

我在输入标签中有一个更改事件,并在"继续"按钮上单击事件,其各自的功能如附图所示.

放置输入和选择的行是模板(作为单独的视图和视图模型),并且该模板在具有后退和继续按钮的页面中组成.

问题:

情况1:

页面加载了输入标签的默认值,并使用value.bind分配值,现在在输入标签中输入一些值,然后单击"继续"按钮,不会丢失输入标签的焦点.在这种情况下,只有foo(change.delegate)被触发而不是foo2(click.delegate)

案例2:

在输入标签中输入一些值并失去焦点,再次在输入标签中输入一些值,现在点击"继续"按钮而不会丢失输入标签的焦点,foo2执行没有任何问题.

我无法理解这种行为.我尝试使用"触发器"代替"委托",即使这不是解决问题.

任何建议或帮助表示赞赏.

我有一个简化的自定义数据网格元素，如下所示：

export class DataGrid {

  @bindable data;

  dataChanged(newValue, oldValue) {
    console.log("Sensing new data...", newValue);
  }
}

实例化如下：

<data-grid data.bind="records"></data-grid>

出现数据网格时，控制台中将显示“正在检测新数据...”和记录数组。但是，当我从对象数组中删除一条记录时，dataChanged()不会触发该函数。

let index = this.records.findIndex((r) => { return r.acc_id === this.record.acc_id; });
if (index > -1) {
  console.log("Deleting element..." + index, this.records);
  this.records.splice(index, 1);
}