我只是在玩弄 Aurelia 中的自定义元素功能,并尝试创建一个“进度条”元素。
进度条.js
import {customElement, bindable} from 'aurelia-framework';
@customElement('progress-bar')
export class ProgressBar
{
//do stuff//
}
进度条.html
<template>
<link rel="stylesheet" type="text/css" href="src/components/progress-bar.css">
<div class='progress-bar' tabindex=0 ref="bar">bloo</div>
</template>
test.html(相关部分)
<require from="./components/progress-bar"></require>
<progress-bar ref="pb">a</progress-bar>
所有这一切都很好。但我正在努力研究如何让主页可以调用某些函数或更改元素上的某些属性,然后应该在进度条本身上做一些事情。
我试图在 progress-bar.js 中创建一个函数“doSomething”,但我无法在 test.js 中访问它。
添加到 progress-bar.js
doSomething(percent, value) {
$(this.bar).animate('width: ${percent}%', speed);
}
在 test.js 中
clicked() {
console.log(this.pb); // this returns the progress bar element fine
console.log(this.pb.doSomething); //this returns as undefined
this.pb.doSomething(percent, value); // this fails outright with error: typeError - doSomething is not a function
}
接下来,我尝试在进度条元素内设置自定义属性,并可能使用 valueChange 来更改 div。
内部 progress-bar.js
@bindable percent=null;
@bindable speed=null;
测试.js
clicked() {
this.pb.percent=50; //this updated fine
this.pb.speed=1500; //this updated fine
}
没问题,差不多了。 但是,如何设置一个处理程序以在属性更改时调用?
我找到了一个语法如下的教程:
@bindable({
name:'myProperty', //name of the property on the class
attribute:'my-property', //name of the attribute in HTML
changeHandler:'myPropertyChanged', //name of the method to invoke on property changes
defaultBindingMode: ONE_WAY, //default binding mode used with the .bind command
defaultValue: undefined //default value of the property, if not bound or set in HTML
})
但我似乎无法在我的 progress-bar.js 中使用该代码。 添加后页面无法正确呈现。Gulp 似乎没有返回任何错误消息,但浏览器控制台返回此错误:
ERROR [app-router] 路由器导航失败,无法恢复之前的位置。
这是我在页面某处出现语法错误时通常收到的消息。
这里有很多我不确定的事情:
这是对自定义元素的正确使用吗? 我们可以创建带有功能的自定义元素吗? 我们能否创建具有自定义属性的自定义元素,然后在其值更改时触发事件?
很抱歉没有发布完整的代码,因为我在尝试不同的东西时有很多变体。
最佳答案
使用 Aurelia,您可以在组件中使用此约定:yourpropertynameChanged()
import {customElement, bindable, inject} from 'aurelia-framework';
import $ from 'jquery';
@customElement('progress-bar')
@inject(Element)
export class ProgressBar
{
@bindable percent;
@bindable speed;
constructor(element){
this.element = element;
}
percentChanged(){
doSomething(this.percent, this.speed);
}
speedChanged(){
doSomething(this.percent, this.speed);
}
doSomething(percent, value) {
$(this.element).animate('width: ${percent}%', value);
}
}
您不需要从外部访问 doSomething()。
但是你只需要改变属性:
<progress-bar percent="${pb.percent}" speed="${pb.speed}">a</progress-bar>
关于javascript - Aurelia:访问自定义元素的自定义函数或自定义属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31233113/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我正在尝试设置一个puppet节点,但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah
我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢
我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2
我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog