我试图在canjs中使用AMD实现MVC.为此,我使用requirejs.这是我的domains.json文件:
[
"1":{"uid": "1","urls": "domain1.abc.com"},
"2":{"uid": "2","urls": "domain2.abc.com"},
"3":{"uid": "3","urls": "domain3.abc.com"}
]
Run Code Online (Sandbox Code Playgroud)
这是我的domainModel:
define(['can'], function(can){
SearchModel= can.Model({
id: 'uid',
findAll: 'GET /domains.json'
},{})
return SearchModel;
})
Run Code Online (Sandbox Code Playgroud)
这是我的控制器:
define(['can','jquery'],function(can,$){
domainController=can.Control({defaults:{view:"../view/search.hbs" }},
{
init : function(element,options){
this.element.html(can.view(this.options.view,{
searchlist : this.options.search
}))
}
});
return domainController;
}
Run Code Online (Sandbox Code Playgroud)
这是我的主要js:
equirejs(['can','controller/domainController','model/domainModel'],
function(can, domainController,domainModel) {
var Application = can.Control.extend({
defaults :{ }
},{
init: function(element,options){
console.log('loaded');
domainModel.findAll({}, function(domains){
domainObject:{searchdomains : domains}
new domainController('#search',domainObject)
});
}
})
return Application;
});
Run Code Online (Sandbox Code Playgroud)
我正在寻找我的代码.我把断点.在模型断点上我没有在chrome devtools中获取局部变量的值.
url属性具有'undefined/{id}'值,findAll方法具有四个属性,即参数,调用者,长度和名称,其值分别为null,null,0和""
我通过在浏览器上浏览localhost来检查我的模型网址,这是正确的.那么为什么模型无法获取json文件的值?
我正在使用带有CanJS的EJS模板,并且正在寻找一种调试我的EJS代码的方法.目前firebug可以向我显示EJS中的语法错误,但在其他浏览器中,我无法看到任何内容.我需要仔细检查我的EJS文件以解决错误.我在网上搜索并发现了有关ejs_fulljslint https://code.google.com/p/embeddedjavascript/,但无法正常运行.我将脚本包含在我的HTML文件中,但仍未收到任何控制台错误.我无法在网上找到调试演示.
谁能告诉我如何调试我的EJS代码.如果您能为我提供任何示例,我们将非常感激.
我想手动创建自动建议元素.我正在使用canjs这个程序.
以下代码我到目前为止尝试过:
list.filter( function( item, index, list ) {
if(item.includes(searchText) && searchText != ''){
//css hide and show classes for match
}
else{
// css show for unmatched results
}
})
Run Code Online (Sandbox Code Playgroud)
在上面的代码中,我面临两个问题:
包含不适用于所有浏览器.为此,我尝试了匹配,
包含和子字符串,但他们无法帮助我.
包括在chrome中工作,但当我输入其子字符串未包含在list的最后一个元素的字符串时,它将无法
工作,因为filter将继续搜索所有元素.
我有什么错误吗?
我希望它能在所有浏览器中运行.
谢谢.
任何人都可以解释如何动画胡子模板?我正在关注 我从这里下载动画的canjs动画文档.我已经添加到我的app.js文件中.那么如何在应用程序中加载该文件呢?
我在我的模板中编写了这段代码,但它不起作用.
<div>
<ul can-animate-fade-out="fast" can-animate-fade-in="slow">
<li>Hello</li>
<li>I am learning</li>
<li>javascript</li>
</ul>
</div>
define(['can', 'jquery','animate'], function (can, $, animate) {
var Animate = can.Control.extend({
defaults: { }
}, {
init: function() {
console.log('javascript initialised');
}
});
return Animate;
});
Run Code Online (Sandbox Code Playgroud)
我正在使用requirejs支持AMD,并尝试在我的requirejsconfig文件中加载can-animate.我已将can-animate.js存储在canjs/amd-dev/can/can-animate/src/lib中.
任何人都可以给我使用它动画DOM元素的完整示例吗?
当我有这样的事情
".mylabel click": function (el,ev){
//mycode in here
}
Run Code Online (Sandbox Code Playgroud)
el是什么意思?ev意味着什么?
我试过在canjs中搜索它,但没有足够的信息.
我can.Model用来检索数据id:
Invoice = can.Model({
findAll: 'GET /invoices',
create : "POST /invoices",
update : "PUT /invoices/{id}",
destroy : "DELETE /invoices/{id}"
},{});
Run Code Online (Sandbox Code Playgroud)
导航到时/invoices,结果如预期,如:
[
0: {
"ID": "1",
"Client": "Client1",
},
1: {
"ID": "2",
"Client": "Client2"
}
]
Run Code Online (Sandbox Code Playgroud)
但是,使用Invoice.findAll并记录到控制台的数据看起来像这样,并为列表中的每个元素重复相同的数据项:
[
0: {
"ID": "1",
"Client": "Client1"
},
1: {
"ID": "1",
"Client": "Client1"
}
]
Run Code Online (Sandbox Code Playgroud)
来自服务器的响应是正确的,那么为什么它被解释为相同项的列表?
我现在正在学习CanJS,所以我想尝试一个非常基本的小型演示.演示是您将在顶部显示不同类型的移动充值计划(单选按钮),并通过选择每个计划,相应的价格选项将显示在底部的表格中.
对于这个演示,我创建了两个Model,2个Control和2个Template文件,我的问题是两个控件如何相互通信?标准方式是什么?
现在我通过它的实例直接调用控制方法,但我不确定它是否是正确的方法.还请解释Can.Route.
输出 http://jsfiddle.net/sabhab1/2mxfT/10/
数据
var CATEGORIES = [{id: 1 , name: "2G Internet Recharge"},
{id: 2 , name: "3G Internet Recharge"},
{id: 3 , name: "full talktime Recharge"},
{id: 4 , name: "Validity and talktime Recharge"},
{id: 5 , name: "National and international roaming"}];
var RECHARGEAMOUNTS =[{
id: 1 ,
values : [{amount: "Rs. 100" , benefit:"300 MB" ,validity:"30"},
{amount: "Rs. 200" , benefit:"1 GB" ,validity:"30"}]
},
{
id: 2 ,
values : [{amount: "Rs. 10" , benefit:"300 …Run Code Online (Sandbox Code Playgroud) 在Can.js中似乎有几种不同的方法可以做同样的事情,这太棒了!但是有些方法与其他方法的工作方式略有不同,并且会影响DOM的呈现和更新方式.如果有人能清除细微差别,我会很感激.
我认为这个选择变得有趣的场景是你想要一个默认文本或一个空列表的占位符.
这些都不一样.空数组和can.List都将呈现{{#if list}}.
所以用我们学到的东西#if......
{{#if list.length}}
<ul>
{{#each list}}
<li>...<li>
{{/each}}
</ul>
{{else}}
<i>The list is empty.</i>
{{/if}}
Run Code Online (Sandbox Code Playgroud)
我认为这是两全其美的.今天我只想到,因为这是一个块助手,所以它支持{{else}}.
{{#list}}
rendered for each item in list
{{else}}
rendered once if list is empty
{{/list}}
Run Code Online (Sandbox Code Playgroud)
问题是,这不能产生我们用过的html #each.
<ul>标签中,无论列表是否为空,它都会被呈现<ul>标签贴在第一个块中(正块?肯定?)并且每次都会渲染所以实现似乎取决于标记.很公平.
据说,#each并#list以不同方式更新DOM.来自#each... 的文档
如果键的值是can.List,则在列表更改时更新生成的HTML.当列表中的更改发生时,仅发生最小量的DOM元素更改.
因此,向列表中添加一个项目,仅渲染该项目,删除项目,仅删除该元素.#list没有记录行为,但我认为它可能会重新渲染整个块.
哪个最好?除了更简洁之外,我不确定是否#list有任何优势,那么作者为什么建议它更受欢迎呢?
所以我想在我的超酷can.js应用程序中制作一些路线.瞄准这样的事情......
#!claims ClaimsController - lists claims
#!claims/:id ClaimController - views a single claim
#!claims/new ClaimController - creates a new claim
#!claims/:id/pdf - do nothing, the ClaimController will handle it
#!admin AdminController - loads my Administrative panel with menu
#!admin/users - do nothing, the AdminController will handle it
#!admin/settings - do nothing, the AdminController will handle it
Run Code Online (Sandbox Code Playgroud)
那我们怎么做呢?
“claims route”: function() { load('ClaimsController'); },
“claims/:id route”: function() { load('ClaimController'); },
“admin”: function() { load(‘AdminController’); },
Run Code Online (Sandbox Code Playgroud)
凉豆,我们走了.那么如果有人发送链接给某人,比如...
http://myapp#!claims/1/pdf
Run Code Online (Sandbox Code Playgroud)
什么都没发生!好吧,让我们添加路线.
“claims/:id/pdf route”: function() …Run Code Online (Sandbox Code Playgroud) 我正在使用带有JQueryUI和mustaches的can.Component创建一个菜单组件.
can.Component呈现胡须模板.当然,这会将部分加载到DOM中.
我的问题是:
将jQuery UI功能应用于菜单,我必须调用:
$('#menu').menu();
Run Code Online (Sandbox Code Playgroud)
...将partial注入DOM后.我如何在组件中执行此操作?我尝试在事件中的init函数中放置前一行.但是,这没有用.在我可以放置此代码之后是否有一些钩子?这样,在组件加载模板后,我就可以从组件本身中应用jquery的东西.
这是我到目前为止,这是行不通的:
var Menu = can.Component.extend({
tag: 'menu',
template: can.view('/assets/neo_admin/views/menu.mustache'),
events: {
init: function(){
$('#menu').menu();
}
}
});
Run Code Online (Sandbox Code Playgroud) canjs ×10
javascript ×6
canjs-model ×2
canjs-view ×2
animation ×1
debugging ×1
ejs ×1
jquery-ui ×1
json ×1
requirejs ×1