小编Mic*_*ski的帖子

通用角度组件 - 可选绑定

我想创建一堆通用组件(angular 1.5),其中包含多个可选绑定,可在多个应用程序中使用.

我担心它会为不使用大多数可选绑定的应用程序创建许多不必要的观察者.

例:

组件声明:

let dateRangeComponent = {
    bindings: {
        label: '@',
        name1: '@',
        name2: '@',
        model1: '>?',
        model2: '>?',
        extra1: '>?'
    },
    template: `<div ng-if="$ctrl.model1>stuff</div>
               <div ng-if="$ctrl.model2>stuff</div>
               <div ng-if="$ctrl.extra1>stuff</div>`
};
Run Code Online (Sandbox Code Playgroud)

组件使用示例:

<date-rage-component label="Pretty Date" name1="Start" name2="end"/>
Run Code Online (Sandbox Code Playgroud)

我的问题是,是否可以自动查看与未使用的可选绑定相关的所有内容,知道它们在编译时未定义?

例如,想象一下我想在我的应用程序中使用一个组件,它不需要任何可选的Binding,angular会创建许多不必要的观察者来保持ng-if更新,当我们知道它们总是假的时候.

我是否在不需要时进行早期性能优化或误解任何概念?

我虽然在创建一个costum包装器指令,以利用角度1.5中的延迟转换编译

像这样的东西(伪代码,未经过测试):

<optional-binding-once ng-if="::attrs.model1">
  <div ng-if="attrs.model1">
      stuff
  </div>
</optional-binding-once>
Run Code Online (Sandbox Code Playgroud)

通过这种方式,我认为只有在ng-if为真时才会编译optional-binding-once中的代码,因此如果没有定义绑定,则会减少一个观察者.

(EDIT)经过一些测试和研究后的一些结论

嗯,我想当没有填充可选绑定时,没有一个简单的解决方案来减少组件内的观察者数量.

我通过角度的$ digest阶段运行了一些测试,以检查这类观察者的数量增加是否真的有问题.

这是我的结果:

针对最坏情况的测试,其具有888个具有4个可选绑定的组件.

Chrome - 没有可选绑定(888组件,总观察者889)

  • 总观察者:889
  • 最后摘要周期时间:0.9950000000026193
  • 最后1004个摘要周期的平均时间:1.0544920318724353 ms
  • 开始dom加载(400ms)

Chrome - 可选绑定(888个组件,4个可选绑定,总观察者4441)

  • 总观察者:4441
  • 最后的摘要周期时间:1.1549999999988358
  • 最后1001个摘要周期的平均时间:1.6851748251747816 ms
  • 开始dom加载(600ms)

Safari - 没有可选绑定(888组件,总观察者889)

  • 总观察者:889 …

javascript angularjs angularjs-directive

20
推荐指数
1
解决办法
4108
查看次数

是否有像茉莉花`toNotContain`测试验收标准?

Jasmin提供了许多功能,用于检查验证规范和测试的预期值.

还有吗?

getJasmineRequireObj().toContain = function() { ... };
Run Code Online (Sandbox Code Playgroud)

像一个

getJasmineRequireObj().toNotContain = function() { ... };
Run Code Online (Sandbox Code Playgroud)

如果没有,如何添加扩展或插件以向我们的开发人员社区提供此功能?

javascript testing unit-testing jasmine karma-runner

17
推荐指数
2
解决办法
5547
查看次数

如何使用 Apollo 和 GraphQL 刷新 JWT 令牌

所以我们正在使用 Apollo 和 GraphQL 创建一个 React-Native 应用程序。我正在使用基于 JWT 的身份验证(当用户同时登录activeTokenrefreshToken 时),并希望实现一个流程,当服务器注意到它已过期时,令牌会自动刷新。

Apollo-Link-Error 的 Apollo Docs 提供了一个很好的起点来捕获来自 ApolloClient 的错误:

onError(({ graphQLErrors, networkError, operation, forward }) => {
  if (graphQLErrors) {
    for (let err of graphQLErrors) {
      switch (err.extensions.code) {
        case 'UNAUTHENTICATED':
          // error code is set to UNAUTHENTICATED
          // when AuthenticationError thrown in resolver

          // modify the operation context with a new token
          const oldHeaders = operation.getContext().headers;
          operation.setContext({
            headers: {
              ...oldHeaders,
              authorization: getNewToken(),
            },
          });
          // …
Run Code Online (Sandbox Code Playgroud)

apollo graphql react-native apollo-client

15
推荐指数
2
解决办法
1万
查看次数

在茉莉花通过Resharper测试的控制器中提供模块

我可以使用Resharper 9.2通过PhantomJs使用jasmine成功测试控制器.作为一名Testrunner.

我按照https://blogs.endjin.com/2014/09/unit-testing-angularjs-with-visual-studio-resharper-and-teamcity/上的说明设置Resharper.

这工作:如果我不指定它所依赖的模块,我可以为控制器运行测试:

控制器:

    var moduleName;
(function (moduleName) {
    'use strict';
    var testableController = (function () {
        function testableController($scope) {
            var _this = this;
            this.$scope = $scope;

            $scope.title = "Welcome";
        }
        testableController.className = 'testableController';
        return testableController;
    }());
    moduleName.testableController = testableController;
})(moduleName || (moduleName = {}));
Run Code Online (Sandbox Code Playgroud)

spec文件看起来像这样

    ///<reference path="~/Scripts/jasmine/jasmine.js"/>
///<reference path="~/Scripts/jasmine/angular.js"/>
///<reference path="~/Scripts/jasmine/angular-mocks.js"/>
///<reference path="~/Scripts/angular-ui/ui-bootstrap.min.js" />
///<reference path="~/Scripts/jasmine/controllers.js"/>
///<reference path="~/Scripts/App/Controllers/testableController.js" />
///<reference path="~/Scripts/App/AppJasmine.js" />
describe("Controllers", function() {

    beforeEach(module("moduleName"));

    describe("Jasmine  testableController", function () {

        var scope,
            controller;

        beforeEach(inject(function ($rootScope, …
Run Code Online (Sandbox Code Playgroud)

javascript resharper jasmine angularjs

14
推荐指数
1
解决办法
361
查看次数

如何为Angular组件注释ngdoc?

我正在编写一个AngularJS组件,我想知道将ngdoc注释添加到组件本身和控制器功能的正确方法是什么.

你有什么例子吗?

javascript angularjs ngdoc angular-components

13
推荐指数
1
解决办法
1359
查看次数

角度固定表头部毛刺

这是我之前发现的帖子的延续.

固定的标题工作正常但我在初始加载时遇到问题.
当表首次加载时,它看起来像这样: 在此输入图像描述

但是,一旦我点击列头以按照该值对其进行排序,所有内容都会卡入到位并最终看起来像这样: 在此输入图像描述

就像我在上一篇文章中所说,我正在使用anguFixedHeaderTable插件.标题很好但我只是遇到了这个故障.我可以提供有关我在此项目中使用的所有资源的详细信息,如果这有助于调试问题.我可以提供更多信息,但我不知道在这一点上提供什么.

此外,当我单击列对列表进行排序时,表格会闪烁,因为它会在使用滚动条返回到300px的高度之前扩展为完整大小.如果我点击它几次,它就会排序而不会有任何表格闪烁.如果我单击一个新的列标题进行排序,它会再次闪烁一次,但再点击几次相同的标题会产生顺畅和干净的排序.知道造成这种闪烁的原因是什么吗?

编辑1: 根据代码向导的建议,我从演示中获取了工作代码并将其放入github .js文件中.这就是我现在拥有的:

function tableDataLoaded() {
    // first cell in the tbody exists when data is loaded but doesn't have a width
    // until after the table is transformed
    return $elem.find("tbody").is(':visible');
    /*var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
    return firstCell && !firstCell.style.width;*/
}
Run Code Online (Sandbox Code Playgroud)

这实际上在首次加载时非常有效.唯一的问题是我有两个表,用户可以通过单击按钮切换.这些表由一个简单的ng-show表达式控制,以检测用户选择的视图.因此,当表首次加载时,外观与两个视图中的外观完全相同.但是如果你不停地来回切换,那么专栏就会再次搞砸了.在您单击列进行排序之前,它会快速回到原位.

编辑2: 我试过去css路线,我大部分时间都在工作.唯一的问题是列略有错位.主要问题是列宽不是动态的.这是一个重现我的问题的傻瓜.如您所见,第一行的第一列内容溢出到相邻列中.我希望列是动态的和对齐的

html javascript css html-table angularjs

12
推荐指数
1
解决办法
1471
查看次数

Ionic 3中的环境特定参数

以何种方式使用与离子命令行界面一起使用的环境特定参数ionic build android --prod --device,以便根据环境(例如生产开发)对javascript/typescript代码进行区分?

我应该用process.env.IONIC_ENV吗?或者我可以通过哪种方式查询这种区别?

javascript environment-variables typescript ionic3 angular

9
推荐指数
1
解决办法
4929
查看次数

在编辑模式下执行CRUD操作时,选择离子选择选项

我正在使用多个字段执行CRUD操作.我有[(ngModel)]所有的领域.

我不想更改[(ngModel)]的名称register.tsedituser.ts在加载时分配或文件中的任何值.因为我已经使表单在寄存器模式下成功地将值保存到DB.我需要在编辑用户表单中显示插入的值以及如何执行该操作.

注意:我有几个其他字段,即文本字段,textarea,密码两种形式,但不知何故我设法在注册过程中将数据保存到数据库中,在编辑用户部分,我也显示了已在编辑模式下插入的值除了之外的所有其他输入类型ion-select.

例如:在登记表,如果用户选择了"男"在编辑模式的选项,我需要留在用户输入正确的,但形式再次表明"性别",而不是显示所选值.

下面我列出了包含的两种形式ion-select以及我所做的努力.

register.html

<ion-item>
  <ion-label floating>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
     <ion-option value="Male">Male</ion-option>
     <ion-option value="Female">Female</ion-option>
  </ion-select>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

Edituser.html

我尝试了各种各样的选择,但这一个单独工作.但这不是我要找的那个.到目前为止[(ngModel)]="editUser.gender"工作,并在选项标签中选择值,但这不是我想要的.我需要模型如下,[(ngModel)]="gender"但必须使用任何可用的方法选择值.

<ion-item>
   <ion-label floating>Gender</ion-label>
   <ion-select [(ngModel)]="editUser.gender" name="gender">
      <ion-option value="Male">Male</ion-option>
      <ion-option value="Female">Female</ion-option>
   </ion-select>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

editUser 包含来自DB的JSON数据.

这里的主要缺点是,当我提供这样的modelname时,在提交表单时不会获取值.所以我需要选项来选择值而不需要更改[(ngModel)].

我的目标是保持模型在register.html表格[(ngModel)] ="性别"中为Register和Edit Form保留.

javascript hybrid-mobile-app ionic-framework angular2-directives ionic3

7
推荐指数
1
解决办法
478
查看次数

将VueJS与Go后端一起使用

我想使用Go模板和VueJS进行数据绑定.以前有没有人融合?

我希望主要使用VueJS进行Ajax调用,因为手动(或使用jQuery)总是让我的代码变得混乱.

更具体地说,如果我有一个简单的<p>标签,其值是从Go模板生成的,如下所示:

{{.Color}}
Run Code Online (Sandbox Code Playgroud)

现在我想像这样绑定到值
:

{{someVariable}} 
Run Code Online (Sandbox Code Playgroud)

两者都是相同的标签.

javascript template-engine go vue.js

5
推荐指数
1
解决办法
3662
查看次数

无法访问私有属性Symfony\Component\Debug\ErrorHandler :: $ loggedErrors

我最近升级到PHP 7.1Symfony 3.4.从那时起,我在日志中看到以下错误消息"无法访问私有属性Symfony\Component\Debug\ErrorHandler :: $ loggedErrors".

寻找根本原因,我发现在某些时候,在尝试序列化未设置属性的对象时会抛出异常.此错误将在方法"handleError"中的"Symfony\Component\Debug\ErrorHandler"中处理.当从"handleError"方法()到达第388 行时,即使"$ this"是"Symfony\Component\Debug\ErrorHandler"的实例,也会生成无法访问私有属性$ loggingErrors的异常.另外,我已经看到在同一行,当检测到弃用时,不会抛出异常而无法访问私有属性.$log = $this->loggedErrors & $type;

有没有人见过这种行为?有人可以解释为什么在一种情况下它可以访问私有财产而在另一种情况下它无法访问它?

php error-handling symfony php-7.1 symfony-3.4

5
推荐指数
0
解决办法
372
查看次数