我有一个消息列表,它们被绑定为来自JSON源的HTML列表.每个图像旁边都有一个删除按钮.当单击该邮件旁边的删除按钮时,我想从列表中删除邮件.
HTML:
<div ng-app="myApp">
<ul ng-controller="MessagesCtrl">
<li ng-repeat="message in messages.data" id="message{{message.id}}">
<a href="#" class="messageIcon">{{message.message}}</a>
<a ng-click="deleteItem()">x</a>
</li>
</ul>
</div>
JS:
var myApp = angular.module("myApp", []);
myApp.factory("Messages", function () {
var Messages = {};
Messages.data = [
{
id: "1",
message: "Message 1"
},
{
id: "2",
message: "Message 2"
},
{
id: "3",
message: "Message 3"
},
{
id: "4",
message: "Message 4"
}
];
return Messages;
});
function MessagesCtrl($scope, Messages) {
$scope.messages = Messages;
$scope.deleteItem = function () { …我已经阅读了有关Isotope支持RequireJs 的文档,但我继承了一个使用RequireJS的网站,该网站设置方式略有不同,我很难理解如何让Isotope和RequireJS一起工作.这是我第一次遇到RequireJS.
设置是这样的:
require.config({
paths: {
jquery: 'libs/jquery-1.11.0',
jqueryUI: 'libs/jquery-ui-1.11.1',
datepickerModule: 'modules/datepicker-module',
gridsetModule: 'plugins/gridset-overlay',
waypoints: 'plugins/waypoints',
booking: 'modules/book-widget',
mobileNav: 'modules/mobile-nav'
},
shim: {
'booking': ['waypoints']
}
});
/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */
require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav'], function($, jqueryUI, base) {
'use strict';
/* ---------- Global modules -------------------------------------------- */
base.init();
});
每次向网站添加新功能时,都会创建一个新的自包含JavaScript文件.在我的情况下,我需要一个使用Isotope进行布局的新模块,所以我创建了一个这样的js文件:
define(['jquery'], function () {
'use strict';
$('#container').isotope();
});
然后我修改了上面的Require配置,所以它现在看起来像这样:
require.config({
paths: {
jquery: 'libs/jquery-1.11.0',
jqueryUI: 'libs/jquery-ui-1.11.1', …我正在通过关于路由的Angular 2文档.我有一个示例应用程序,它显示了两个组件,这些组件被路由并连接到导航链接. 这是一个展示行为的Plunker.它是在Typescript中使用Angular 2构建的.
这是主要的'app.component.ts'代码:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {CrisisCenterComponent} from './crisis-center/crisis-center.component';
import {HeroListComponent} from './heroes/hero-list.component';
import {HeroDetailComponent} from './heroes/hero-detail.component';
import {DialogService} from './dialog.service';
import {HeroService} from './heroes/hero.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
providers: [DialogService, HeroService],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
}, …我有一个Angular 2应用程序,它调用JSON API将数据加载到嵌套的HTML列表中(<ol>).本质上是动态生成的树视图.由于API中的数据集最终会变得非常大,当用户打开分支时,树会逐渐填充(用户打开分支,使用已打开的节点的id调用API,API返回JSON对于节点的直接子节点的馈送,Angular将返回的JSON绑定到一些新的HTML <li>元素,并且树展开以显示新的分支).
你可以在这个Plunkr中看到它的实际效果.它使用递归指令并且运行良好. 目前,因为我无法打开公共请求的实际API,它只是调用静态JSON提要,因此每个节点的返回数据只是重复,但希望你能得到这个想法.
我现在要克服的问题是在分支关闭然后重新打开时防止无关的HTTP调用.读完HTTP客户端文档后,我希望这就像修改订阅数据服务的方法一样简单,将方法链接.distinctUntilChanged()到app/content-list.component.ts文件,如下所示:
getContentNodes() {
this._contentService.getContentNodes(this._startNodeId)
.distinctUntilChanged()
.subscribe(
contentNodes => this.contentNodes = contentNodes,
error => this.errorMessage = <any>error
);
}
但是,当我打开浏览器网络检查器时,每次重新打开相同的树分支时,它仍然会调用API.
谁能建议如何解决这个问题？
非常感谢.
编辑:
我正试图在下面实施@Thierry Templier的答案; 缓存API返回的数据.所以内容服务现在是:
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {ContentNode} from './content-node';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ContentService {
constructor (private http: Http) {}
private _contentNodesUrl = 'app/content.json'; …我正在通过实现一个简单的购物车来学习一些VueJS。
这是我的HTML：
<div id="app">
<table>
<thead>
<tr>
<th>Product</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr v-for="(cartItem, index) in order.cartItems">
<td>{{ cartItem.productName }}</td>
<td>{{ cartItem.unitPrice }}</td>
<td>{{ cartItem.quantity }}</td>
<td>{{ lineTotal[index] }}</td>
</tr>
<tr class="shipping">
<td>Shipping</td>
<td>{{ shipping }}</td>
<td>{{ totalItems }}</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">TOTAL</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
这是JS：
const shipping = 1.5;
const app = new Vue({
el: '#app',
data: {
shipping: shipping.toFixed(2),
order: []
},
created() {
fetch('https://api.myjson.com/bins/1fk6ua')
.then(response => response.json())
.then(json …假设 CSS 文件中没有内部嵌入，那么在以下服务器端渲染场景中使用 CSS 层和@import对比是否存在任何性能缺陷：<link>
使用<link>：
<html>\n<head>\n <link rel="stylesheet" href="reset.css">\n <link rel="stylesheet" href="helpers.css">\n <link rel="stylesheet" href="grid.css">\n <link rel="stylesheet" href="theme.css">\n</head>\n<body>\n <link rel="stylesheet" href="header.css">\n <header><!-- Site header, logo, nav etc --></header>\n\n <main>\n <link rel="stylesheet" href="carousel.css">\n <div class="carousel-module"><!-- Carousel module --></div>\n\n <link rel="stylesheet" href="cards.css">\n <div class="cards-module"><!-- Cards module --></div>\n </main>\n\n <link rel="stylesheet" href="footer.css">\n <footer><!-- Site footer --></footer>\n</body>\n</html>\n@import与图层一起使用：
<html>\n<head>\n <style>\n @layer default, theme;\n @import url("reset.css") layer(default);\n @import url("helpers.css") layer(default);\n @import url("grid.css") layer(default);\n @import …我正在使用RaphaelJS 2.0在div中创建多个形状.每个形状都需要能够独立地在div的范围内拖放.双击形状后,该形状需要旋转90度.然后可以拖放它并再次旋转.
我已经在fiddler上加载了一些代码:http://jsfiddle.net/QRZMS/.它基本上是这样的:
window.onload = function () {
var angle = 0;
var R = Raphael("paper", "100%", "100%"),
shape1 = R.rect(100, 100, 100, 50).attr({ fill: "red", stroke: "none" }),
shape2 = R.rect(200, 200, 100, 50).attr({ fill: "green", stroke: "none" }),
shape3 = R.rect(300, 300, 100, 50).attr({ fill: "blue", stroke: "none" }),
shape4 = R.rect(400, 400, 100, 50).attr({ fill: "black", stroke: "none" });
var start = function () {
this.ox = this.attr("x");
this.oy = this.attr("y");
},
move …我有一个页面,其中包含几个嵌入标准iframe方式的vimeo视频.我在HTML头部和jquery(v 1.4.2)中引用了froogaloop.js(http://a.vimeocdn.com/js/froogaloop2.min.js).我想要做的是能够播放每个视频onmouseover并暂停onmouseout.
我在这里设置了一个JSFiddle页面:http://jsfiddle.net/g2Z2B/,它显示了我想要做的事情 - 基本上只是将视频播放/暂停绑定到jquery onmouseover/onmouseout事件 - 但无论如何很多我通过API文档阅读,我无法得到任何工作.我试图在这里拆开API演示页面:http://player.vimeo.com/playground但是甚至无法让它在鼠标悬停上工作 - 加上每当我试图去除不需要的东西时它也会破坏.我所要做的就是超级简单.
如果有人能指出我正确的方向,我将非常感激!