小编Hen*_*rik的帖子

免责声明:这是我第一次尝试构建MVVM应用程序,我以前也没有使用过vue.js,所以很可能我的问题是一个更基本的问题.

在我看来,我有两种带复选框的块:

• 类型1:块/复选框
• 类型2:块/标题/复选框

底层对象的结构如下:

{
  "someTopLevelSetting": "someValue",
  "blocks": [
    {
      "name": "someBlockName",
      "categryLevel": "false",
      "variables": [
        {
          "name": "someVarName",
          "value": "someVarValue",
          "selected": false,
          "disabled": false
        }
      ]
    },
    {
      "name": "someOtherBlockName",
      "categryLevel": "true",
      "variables": [
        {
          "name": "someVarName",
          "value": "someVarValue",
          "categories": [
            {
              "name": "SomeCatName",
              "value": "someCatValue",
              "selected": false,
              "disabled": false
            }
          ]
        }
      ]
    }
  ]
}

我的目标

选择复选框:

1. 用户点击复选框,复选框被选中(选中=真)
2. 触发一个方法以检查是否需要禁用任何其他复选框(disabled = true).(如果此方法确实禁用了任何内容,它也会再次调用自身,因为其他项可能依赖于禁用的项目)
3. 另一种方法更新了其他一些东西,比如图标等

清除复选框

用户可以单击"清除"按钮,该按钮取消选中列表中的所有复选框(选中= false).此操作还应触发可选地禁用复选框和更新图标等的方法.

我目前的方法 (看起来不太正确)

• 数据模型的selected属性通过v-model指令绑定到checkbox元素的checked状态.
• disabled属性(来自模型)绑定到元素的class和disabled属性.该状态由上述方法设定.
• 要初始化禁用复选框和更改某些图标的方法,我使用的是v-on="change: checkboxChange(this)"指令. …

我想使用ngSwitch有条件地呈现一些内容,但我希望该内容是唯一要呈现给DOM的内容.我将以一个例子来说明.

这就是我目前所拥有的:

<div [ngSwitch]="thing.name">
    <template ngSwitchWhen="foo">
        <div>FOOOOOO</div>
    </template>
    <template ngSwitchWhen="bar">
        <div>BARRRR</div>
    </template>
    <template ngSwitchWhen="cat">
        <div>CAT</div>
    </template>¯
    <template ngSwitchWhen="dog">
        <div>DOG</div>
    </template>
</div>

我想将父元素从a更改<div>为a,<template>因此只有最内部元素才会实际插入到DOM中.我怀疑它可能是可能的,因为我知道你可以做类似的事情ngFor,即:

<template ngFor [ngForOf]="things" let-thing="$implicit">

但是,我还没有弄清楚如何才能让它工作 ngSwitch

我遵循RoR入门指南，并在进行过程中添加了一些内容。具体来说，我要实现的是在步骤5.13删除文章中，我使用AJAX而不是标准模式来删除文章。

我想以最适合RoR的做事方式来做。在阅读了在Rails中使用JavaScript一章之后，似乎可以采取以下步骤：

1. remote: true向link_to助手添加属性（请参见代码段A）
2. link_to通过添加禁用涡轮增压器此帮助程序data: {turbolinks: false}（请参见代码段A）
3. 向控制器添加一些逻辑，以确保返回JSON（请参见代码段B）。
4. 添加用于侦听ajax:success事件的JavaScript，然后将项目动画化（请参见代码段C）。

片段A

<td><%= link_to 'Destroy', 
        article_path(article),
        method: :delete,
        data: {turbolinks: false, remote: true},
        :class=> 'remove-article' %></td>

片段B

def destroy  
    @article = Article.find(params[:id])

    respond_to do |format|
      if @article.destroy
        format.html { redirect_to articles_path }
        format.json { render json: @article }
      else
        format.html { render action: "index" }
        format.json { render json: @article.errors, status: :unprocessable_entity }
      end
    end

end

片段C

(function(){
  $(document).on('turbolinks:load', listenForArticleDelete); …

我有一个 TypeScript 项目，并通过ts-jest使用 Jest进行测试。在 VS Code 中，我安装了插件vscode-jest。调试并不完全如我所愿：

• 我可以通过单击Debugvscode-jest 生成的 CodeLens来启动调试会话
• 如果我在测试代码中放置断点，调试器将按预期在断点处暂停
• 但是如果我在源代码中放置断点，调试器将忽略它

我想这是因为 ts-jest 的工作方式。断点可能永远不会找到，因为测试是在 JS 文件而不是 TS 文件上运行的。

如果我在使用 Create React App 引导的 JS 项目中尝试相同的操作，我可以在源文件中设置断点，调试器将停止。这很有趣，因为这些源文件也是由 babel 编译的......

我想知道是否可以调整我的设置，以便调试器能够识别源文件中的断点。

在下面发布一些可能相关的文件：

jest.config.js

module.exports = {
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
    testPathIgnorePatterns: ['/dist/', '/node_modules/'],
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    collectCoverage: false,
};

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./dist",
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true, …

我想知道是否可以通过React Native组件react-native-video播放Vimeo和YouTube。到目前为止，我的研究指出这几乎是不可能的，因为react-native-video需要直接引用文件（或流？），而这些引用对于YouTube和Vimeo来说很难/很难获得？

有什么方法可以让Vimeo和YouTube使用本机视频？