LassoJS 和 Marko-Widgets
LassoJS and Marko-WIdgets
所以伙计们,我在这里有点小噩梦。到目前为止,开始使用 makoJs 和 Marko-widgets。但是...
这是我按照一些示例组织并与lassoJS集成的东西。所以在套索的做事方式中,我没有实现定义组件的方法。
那么我需要完成什么:
module.exports = require('marko-widgets').defineComponent({
template: require('./template.marko'),
getInitialState: function(input) {
return {
name: input.name,
selected: input.selected || false;
}
},
getTemplateData: function(state, input) {
var style = ;
return {
name: state.name,
color: state.selected ? 'yellow' : 'transparent'
};
},
handleClick: function() {
this.setState('selected', true);
},
isSelected: function() {
return this.state.selected;
}
});
我的 Marko 文件是这样写的:
import './style.css'
static function getClassNameForValue(value) {
if (value < 0) {
return 'negative';
} else if (value > 0) {
return 'positive';
}
}
class {
onInput(input) {
var value = input.value || 0;
this.state = {
value: value
};
}
handleIncrementClick(delta) {
this.state.value += delta;
var value = this.state.value;
var send = {
value:value
}
console.log(value);
$.post( "/tryPost", send,function( data ) {
console.log(data);
});
}
handleInputKeyUp(event, el) {
var newValue = el.value;
if (/^-?[0-9]+$/.test(newValue)) {
this.state.value = parseInt(newValue, 10);
}
}
}
$ var value=state.value;
<div class=['number-spinner', getClassNameForValue(value)]>
<button type="button" onClick("handleIncrementClick", -1)>
-
</button>
<input type="text" value=state.value size="4"
onKeyUp("handleInputKeyUp")>
<button type="button" onClick("handleIncrementClick", 1)>
+
</button>
</div>
编辑:
所以我在想,知道我使用的那些模块的哪个版本可以提供帮助。
"lasso": "^2.11.3",
"lasso-less": "^2.4.3",
"lasso-marko": "^2.2.2",
"lodash": "^4.17.4",
"markdown-js": "0.0.3",
"marked": "^0.3.6",
"marko": "^4.0.0-rc.18",
"marko-widgets": "^6.6.0"
那么如何实现生命周期事件的监听器呢?
我不太确定问题是什么,但是对于 marko
v4,不应再安装 marko-widgets
(只应安装 marko
)。您需要执行以下操作:
npm uninstall marko-widgets --save
我们仍在完成 v4 文档的定稿过程中,但以下关于组件生命周期方法的 v4 文档可能会有所帮助:https://github.com/marko-js/marko/blob/9b6a288d83fef926590f24368a40476c5ff0e240/docs/06-components.md#lifecycle
如果还有不明之处,请加入Gitter聊天室:https://gitter.im/marko-js/marko
一个小细节,但它与事件有关,所以可能:
<button type="button" onClick("handleIncrementClick", -1)>
我想这个活动的名字是on-click
所以伙计们,我在这里有点小噩梦。到目前为止,开始使用 makoJs 和 Marko-widgets。但是...
这是我按照一些示例组织并与lassoJS集成的东西。所以在套索的做事方式中,我没有实现定义组件的方法。
那么我需要完成什么:
module.exports = require('marko-widgets').defineComponent({
template: require('./template.marko'),
getInitialState: function(input) {
return {
name: input.name,
selected: input.selected || false;
}
},
getTemplateData: function(state, input) {
var style = ;
return {
name: state.name,
color: state.selected ? 'yellow' : 'transparent'
};
},
handleClick: function() {
this.setState('selected', true);
},
isSelected: function() {
return this.state.selected;
}
});
我的 Marko 文件是这样写的:
import './style.css'
static function getClassNameForValue(value) {
if (value < 0) {
return 'negative';
} else if (value > 0) {
return 'positive';
}
}
class {
onInput(input) {
var value = input.value || 0;
this.state = {
value: value
};
}
handleIncrementClick(delta) {
this.state.value += delta;
var value = this.state.value;
var send = {
value:value
}
console.log(value);
$.post( "/tryPost", send,function( data ) {
console.log(data);
});
}
handleInputKeyUp(event, el) {
var newValue = el.value;
if (/^-?[0-9]+$/.test(newValue)) {
this.state.value = parseInt(newValue, 10);
}
}
}
$ var value=state.value;
<div class=['number-spinner', getClassNameForValue(value)]>
<button type="button" onClick("handleIncrementClick", -1)>
-
</button>
<input type="text" value=state.value size="4"
onKeyUp("handleInputKeyUp")>
<button type="button" onClick("handleIncrementClick", 1)>
+
</button>
</div>
编辑: 所以我在想,知道我使用的那些模块的哪个版本可以提供帮助。
"lasso": "^2.11.3",
"lasso-less": "^2.4.3",
"lasso-marko": "^2.2.2",
"lodash": "^4.17.4",
"markdown-js": "0.0.3",
"marked": "^0.3.6",
"marko": "^4.0.0-rc.18",
"marko-widgets": "^6.6.0"
那么如何实现生命周期事件的监听器呢?
我不太确定问题是什么,但是对于 marko
v4,不应再安装 marko-widgets
(只应安装 marko
)。您需要执行以下操作:
npm uninstall marko-widgets --save
我们仍在完成 v4 文档的定稿过程中,但以下关于组件生命周期方法的 v4 文档可能会有所帮助:https://github.com/marko-js/marko/blob/9b6a288d83fef926590f24368a40476c5ff0e240/docs/06-components.md#lifecycle
如果还有不明之处,请加入Gitter聊天室:https://gitter.im/marko-js/marko
一个小细节,但它与事件有关,所以可能:
<button type="button" onClick("handleIncrementClick", -1)>
我想这个活动的名字是on-click