小编Phi*_*egg的帖子

我的问题涉及如何在AngularJS应用程序中处理模板(也称为部分)的复杂嵌套.

描述我的情况的最好方法是使用我创建的图像:

正如您所看到的,这可能是一个包含大量嵌套模型的相当复杂的应用程序.

应用程序是单页面的,因此它会加载一个index.html,其中包含DOM中带有ng-view属性的div元素.

对于圆圈1,您会看到有一个主要导航将相应的模板加载到ng-view.我是通过传递$routeParams到主app模块来做到这一点的.这是我的应用程序中的一个示例:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

在圆圈2中,加载到其中的模板ng-view具有附加的子导航.然后这个子导航需要将模板加载到它下面的区域 - 但由于ng-view已被使用,我不知道如何去做.

我知道我可以在第一个模板中包含其他模板,但这些模板都非常复杂.我想将所有模板分开,以使应用程序更容易更新,并且不必依赖于必须加载的父模板才能访问其子代.

在第3圈中,您可以看到事情变得更加复杂.子导航模板可能具有第二个子导航,需要将其自己的模板加载到圆圈4中的区域

如何构建AngularJS应用程序来处理模板的这种复杂嵌套,同时保持它们彼此分离？

我在ng-repeat块中使用ng-show指令时遇到问题.

布尔值似乎没有正确传递给ng-show ...

为了表明我的意思,这里是我在JSFiddle中做的一个例子的截图:

这是一些示例标记:

<table ng-controller="ActressController" class="table table-bordered table-striped">
    <tr ng-repeat="actress in actressList">
        <td>
            <span class="actress-name">{{ actress.name }}</span>
            <h4 ng-show="{ actress.name == 'Scarlett' }">Was in Avengers! <span class="note">(should only appear if Scarlett)</span></h4>
            <h2>{{ actress.name == 'Scarlett'}} <span class="note"><-- this statement is correct</span></h2>

        </td>

    </tr>
</table>

这是一个示例控制器:

function ActressController($scope) {
    $scope.actressList = [
        {
            name: "Angelina"
        }, {
            name: "Scarlett"
        }, {
            name: 'Mila'
        }, {
            name: 'Megan'
        }
    ]        

}

关于我可能做错的任何想法？

我正在回顾Backbone todo列表并对该集合有疑问.

这是代码:

window.TodoList = Bacbone.Collection.extend({

        model: Todo,

        localStorage: new Store("todos"),

        done: function() {
            return this.filter(function(todo){return todo.get("done")})
        },

        remaining: function() {
            return this.without.apply(this, this.done());
        }



    })

我理解这里发生的一切,除了"剩余"功能.

return语句:return this.without.apply(this, this.done());使用代理到下划线方法 -_.without

根据Underscore的文档,这是为了:

without_.without(array,[*values])返回数组的副本,其中删除了所有值的实例.===用于相等测试.

_.without([1,2,1,0,3,1,4],0,1); => [2,3,4]

所以,我得知它是在没有'done'属性且值为'true'的情况下返回集合中的所有内容.

我不明白的是被绑定到它的'apply'功能.这不会出现在Backbone文档或Underscore文档中.至少在任何地方我都找不到它.

任何人都可以在Return语句中详细解释这些元素的用途吗？

可能重复:
为什么我不能在python中处理KeyboardInterrupt？

我正在玩一些Python代码并创建了一个无限循环:

y = 0
x = -4

itersLeft = x
while(itersLeft<0):
    y = y + x
    itersLeft = itersLeft - 1
    print "y = ",y, "itersLeft = ", itersLeft

print y

是否有键盘快捷键可以让我停止循环 - 允许我修复循环然后重新启动它？

我试过Ctrl+ C并没有任何运气.如果它有助于我使用Windows 7环境.

谢谢.

编辑

我还应该提到我正在使用Aptana Studio 3并试图在其中运行Ctrl+ C命令.它在那里不起作用 - 但在常规控制台中尝试它可以正常工作.我假设它必须是因为Aptana环境.

我正在尝试在使用Knockout.js的项目中创建一个可拖动的列表项.

我正在使用下面的代码,你可以看到它非常简单:

<div id="room-view" >
    <ul data-bind="foreach: rooms">                     
        <li data-bind="text: name" class="draggable room-shape"></li>                   
    </ul>               
</div> 

<script type="text/javascript">
    $(function() {
        $( ".draggable" ).draggable();
    });
</script>

'room'列表渲染得很好,但没有一个项目是可拖动的.但是,如果我将'draggable'类应用于页面上的任何其他元素 - 它将变为可拖动.即使它们是其他列表项.唯一的区别是这些列表项是通过'foreach'绑定创建的.

任何人都可以发现可能导致其无法正常工作的原因吗？

我的Ember应用程序有一个包含2个不同组件的路由和一个带有index.hbs模板的控制器.

这是它的样子:

1)用户可以从过滤器组件的下拉列表中选择多个过滤器

2) DataGrid是与过滤器分开的组件

3)用户可以通过复选框从DataGrid中选择多行

4)创建自定义报告按钮将"sendAction"激活到路径的控制器

这些数据不是特定于模型的...它只是我可以制作自定义报告之前所需的临时数据.

Ember最佳实践是"Data Down/Actions Up",根据我的阅读,您不应该尝试从控制器访问组件.

但问题是,控制器中的createCustomReport方法需要访问在filter-component中选择的所有过滤器以及在grid-component中检查的所有行.

我的第一直觉是在组件本身上设置属性 - 让它保持自己的状态 - 然后从控制器获取对组件的引用,以便在将其传递给报告函数之前获取其状态.

但显然这是禁忌.

这是我目前的解决方案:

每次选择过滤器时,都会有一个sendAction从组件冒泡到控制器,并在控制器上设置自定义属性.

此外,每次从网格中选择一个复选框时,另一个sendAction将转到组件,然后冒泡到控制器并在控制器上为选定的网格行设置自定义属性.

然后,当我单击"createCustomReport"时,在控制器中触发的方法可以访问我之前设置的属性 - 因为它们现在都在控制器上.

所以它看起来像这样:

import Ember from 'ember';

export default Ember.Controller.extend({

    myFirstFilter: undefined,
    mySecondFilter: undefined,

    actions: {
        createCustomReport() {
            // do something with all those component properties you've been setting
        },

        // These are triggered by the sendAction on the respective component
        firstFilterMethod(myProperty1) {                
            this.set('myFirstFilter', myProperty1.name);
        },

        secondFilterMethod(myProperty2) {               
            this.set('mySecondFilter', myProperty2.name);
        },

        ... …

我最近创建了一个带有Rails 3.2.3后端的AngularJS 1.0.0rc8应用程序,它在开发中运行良好,但在部署到Heroku之后出现了一个Unknown Provider错误 - 显然应用程序无法看到服务对象.

我知道现在需要将angular-resource.js作为一个单独的文件包含在内,并将ngResource注入app模块,如下所示:

// main app javascript file

'use strict';

angular.module('contactapp', ['ngResource']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/contacts', {template: 'assets/app/partials/contact-list.html', controller: ContactListCtrl}).
      when('/contacts/new', {template: 'assets/app/partials/new-contact.html', controller: ContactListCtrl}).
      when('/contacts/:contact_id', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}).
      otherwise({redirectTo: '/contacts'});      

}]);

我也知道,当文件被缩小时,控制器无法分辨它们的依赖关系,除非它们也被注入控制器对象,如下所示:

ContactListCtrl.$inject = ['$scope', '$http', 'Contacts'];

我也试过用Angular推荐的括号表示法并传入这样的函数的另一种方式:

var ContactListCtrl= ['$scope', '$http', 'Contacts', function($scope, $http, Contacts) { /* constructor body */ }];

但是,这似乎都不起作用.

我的应用程序可以看到提供的资源的唯一方法是关闭Production.rb文件中的资产压缩,如下所示:

# Compress JavaScripts and CSS
  config.assets.compress = false

我花了几个小时来解决这个问题,但是我最近看到了另一个Rails + AngularJS应用程序有同样的问题.

Jens Krause得出了同样的结论并在他的博客上解释了这一点:http: //www.websector.de/blog/2012/01/17/fun-with-angularjs-rails-coffeescript-sass-another-cafe-townsend-例/ …

看看ExtJS 4,我试图在这里做"Hello World"教程:http: //www.sencha.com/learn/getting-started-with-ext-js-4/

我按照教程中的建议设置了所有文件:

但是,由于启动文件的时髦语法,我不断收到错误:

我没有使用JQuery或任何其他库 - 因为Sencha应该是一个完整的JavaScript环境.

这是完整的代码:

app.js

<a href="#!/api/Ext-method-application" rel="Ext-method-application" class="docClass">Ext.application</a>({
    name: 'HelloExt',
    launch: function() {
        <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.container.Viewport" rel="Ext.container.Viewport" class="docClass">Ext.container.Viewport</a>', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

的index.html

<!doctype html>
<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

关于什么可能是罪魁祸首的任何想法？

我在做什么:

我正在创建一个示例应用程序,演示如何使用Rails 3作为JSON服务器将Kendo UI控件与Backbone.js合并.

到目前为止,我有一个在erb文件中管理模板的Backbone Views和一个管理Views本身的Backbone Router - 取决于被点击的链接.

完成后,我想把它全部作为一个教程来帮助想要进入Backbone的人 - 和KendoUI(这也非常酷).

问题:

Kendo网格不通过用户视图渲染方法渲染 - 即使它是容器模板.

现在,我必须从路由器的Users方法渲染网格 - 在路由器渲染用户视图之后.

模板渲染似乎很奇怪,但网格没有 - 或者我错过了什么？

一旦看到代码,可能会更容易理解:

index.html.erb

<h1>Kendo Grid Test</h1>

<div id="nav"></div>


<div id="container">

<!-- The templates below will be placed  here dynamically    -->

</div>

<!-- TEMPLATES -->
<script type="text/template" id="users-grid-template">  
    <p>Users Grid Template</p>

    <div id="users-grid"></div> 


</script>

<script type="text/template" id="posts-grid-template">  
    <div id="posts-grid"></div> 
</script>



<script type="text/template" id="nav-template">
  <div>
    <ul id="nav_container">
        <li><a href="#users">Users</a></li>
        <li><a href="#posts">Posts</a></li>
    </ul>
  </div>
</script>

骨干用户查看

window.UsersView = Backbone.View.extend({

            initialize: function() { …

我正在使用AngularJS 1.0.0rc8使用Crud构建一个简单的Contact Management应用程序.

获取当前存在的联系人列表没有问题,但在尝试将新联系人保存到服务器时,会创建一个新行 - 包含正确的id,created_at和updated_at值 - 但其余的模型数据将被忽略.

这是一个截图,显示我的意思:

如您所见,数字4和5被赋予了Id,但first_name,last_name和phone_num未保存到数据库中.

我在Controller中使用$ scope.addContact函数来处理对象.

以下是联系人列表控制器的完整代码:

'use strict';

function ContactListCtrl($scope, $http) {
  $http.get('/contacts').success(function(data) {
    $scope.contacts = data;
  });    

  $scope.addContact = function(data) {      

    $http.post('/contacts/', data).success(function(data) {
        console.log(data);
        data.first_name = $("#new_contact_first_name").val();
        data.last_name = $("#new_contact_last_name").val();
    });

    this.newFirstName = '';
    this.newLastName = '';
  };

};

单击new-contact.html partial上的"Save"后,如果我检查其内容,则会将对象记录到控制台,而不是确定收集到的值 - 请注意Jimi Hendrix在那里:

以下是new-contact.html模板中显示的表单:

<form id="contact_form" ng-submit="addContact()">
            <input type="text" id="new_contact_first_name" name="newContactFirstName" ng-model="newFirstName" placeholder="First Name"></br>
            <input type="text" id="new_contact_last_name" name="newContactLastName" ng-model="newLastName" placeholder="Last Name"></br>
            <input type="button" id="contact_submit_btn" value="Add Contact" …