标签: javascript-databinding

使用Aurelia,我想填充<div>包含html文本的viewmodel属性(让我们称之为htmlText)的内容,我正在使用

<div>
${htmlText}
</div>

但是,这样编码html所以,而不是有段落或链接,所有标签都被转义,因此html可以被视为源.

有开箱即用的活页夹吗？

使用ngReact,如何优雅地实现双向数据绑定？

假设我有一个简单的React输入组件,它需要一个value并调用onChange它.

angular.module('app', []).value('SimpleInput', props => 
  <input type='text' 
         value={props.value}
         onChange{e => props.onChange(e.target.value)} />
)

然后我希望像这样的东西更新value范围.

<react-component name="SimpleInput" 
                 props="{value: value, onChange: v => value = v}">
</react-component>

但是,有自动/更优雅的方式吗？

请看这个 小提琴

请在文本区域输入4,它应该写一条错误信息,就在这一行:

   $names.push('<div ng-bind-html-unsafe="snippet"></div>');

实际上它没有.它打印html代码本身而不处理,

而底层的HTML是:

<li ng-repeat="user in list|splitList:appUsers" class="ng-scope ng-binding">
        &lt;div ng-bind-html="snippet"&gt;&lt;/div&gt;
    </li>

我试图按照这个主题的解决方案

但似乎没有任何帮助,

任何帮助修复它将被视为,

我已经看到了其他线索,但我仍然感到困惑,我想我在这里提出了一个不同的案例.

我正在使用显示模式将视图模型对象返回到我的HTML文档.因此,我有一个看起来像这样的视图模型对象:

var vm = function() {
   var customProperty = ko.numbericObservable(0);

   return {
      customProperty: customProperty
   };
} ();

从这里,您可以看到customProperty被分配给初始值为0的Knockout数字observable.

在包含上面的JavaScript的HTML文档中,我有一个带有data-bind属性的SPAN元素,该属性订阅了customProperty observable,如下所示:

<span data-bind="text: customProperty" 
  id="customProperty" style="font-weight:bold"></span>

到现在为止还挺好.上面的工作正常,这意味着每当我在脚本中更改customProperty的值时,SPAN中的文本立即更新.例如,我可以成功轻松地使用此表达式将customProperty observable的值从0更改为10:

vm.customProperty(10);

我的问题:

1. 请注意,在引用customPropertydata-bind属性中的值时,我没有使用括号.为什么不要求括号？

2. 我发现使用括号也有效:

我理解为什么使用括号工作(因为我正在读取Knockout observable的值).但为什么括号不需要呢？换句话说,为什么第1点的数据绑定表达式会起作用？

3. 最后,这项任务实际发生了什么？

   var customProperty = ko.numericObservable(0);

customProperty最终是否持有一个指向函数的指针customProperty()？

我的模板中有这一行:

<span>{{ data.things.find(r => { return r.id == 5 }).description }}</span>

当我运行它时,我收到以下错误:

Parser Error: Bindings cannot contain assignments at column...

这是否意味着您无法array.find在绑定中使用？

我知道我的对象有值,表达式在监视窗口中计算.有什么建议？

编辑:虽然这个问题及其答案将绕过这个问题,但我不认为它们是重复的.这个问题特定于过滤到较小的列表,也许是一条记录,因为我的问题是每次都得到一条记录.@ Thierry-Templier在这方面的答案看起来不错,我喜欢它的html干净程度.

作为练习,我使用RGB和十六进制创建颜色值的输入.

HTML:

<form ng-controller="myCtrl">
    R:<input ng-model="rChannel" type="number" min="0" max="255" required></input>
    G:<input ng-model="gChannel" type="number" min="0" max="255" required></input>
    B:<input ng-model="bChannel" type="number" min="0" max="255" required></input>

    hex: #<input ng-model="hexColor" type="text" required></input>
</form>

JS:

function myCtrl($scope) {
    $scope.$watch('[rChannel, gChannel, bChannel]',
              function() {
                $scope.hexColor = rgbToHex($scope.rChannel, $scope.gChannel, $scope.bChannel)
              },
              true);

    $scope.$watch('hexColor',
              function() {
                var rgbArr = hexToRgbArray($scope.hexColor);
                $scope.rChannel =  rgbArr[0];
                $scope.gChannel =  rgbArr[1];
                $scope.bChannel =  rgbArr[2];
              });
}

http://jsfiddle.net/F545z/

它有效......有一个大的打嗝.任何一个输入值无效的时刻(空字符串,或十六进制少于六个字符),所有输入都会消失!这具有删除用户已经输入的值的效果.例如,当用户键入有效的6个字符的十六进制值,然后按下删除键以更正十六进制的最后一个字符时,整个十六进制值消失,需要完全重新输入.如果您在控制台中观看,您可以看到正在发生的事情.我认为当十六进制无效时rgb输入消失是正确的行为,但它明显妨碍用户删除他/她在打字过程中的值.

这显然是因为"双重绑定" - rgb和hex值正在观察他们自己的模型,但也是彼此.这里有一些严重的无限循环潜力,它可能只是起作用,因为角度文档说循环只运行10次以防止无限循环死锁.

我很确定我这样做是错误的.我应该尝试为十六进制输入编写单独的指令吗？如果是这样,我该如何将它们全部链接起来？$ watch对于这种用途是否合法？工作小提琴最有帮助.

我正在创建SPA.我正在使用knockout和observable数组来迭代json数组.有时我在文本中有br标签,并且使用data-bind ="text:myVar"我想要排队.问题是,br标签不会工作,因为我可以看到<br />除了新线.我的问题是:如何使用json数据中的br标签强制knockout data-bind创建新行？我试图使用"白色空间:预包装",但没有用.