小编Kas*_*tin的帖子

我知道这不是很傻,但如何开始一个承诺链？我有,例如,

var p = new Promise(function(resolve,reject) {
  setTimeout(function() {
    return resolve("Hi from promise after timeout");
  },1000);
});

怎么运行呢？它应该是这样的,

when(p)
.then(function(msg) {
  console.log(msg);
})
.catch(function(error) {
  console.error(error);
});

但是when没有定义.

假设我们有一些对象数组,这些对象永远不会改变.例如,这可能是搜索结果,从谷歌地图收到地方api - 每个结果都是相当复杂的对象,包括id,标题,地址,坐标,照片和一堆其他属性和方法.

我们想使用vue/vuex在地图上显示搜索结果.如果某些新结果被推送到商店,我们想在地图上绘制他们的标记.如果删除某些结果,我们要删除其标记.但内部每一个结果都不会改变.

有没有办法告诉vue跟踪数组(推,拼接等),但不要更深入,不跟踪它的任何元素的属性？

现在我可以想象只有一些丑陋的数据分裂 - 保持id的数组在vue中并且在商店之外具有单独的cache-by-id.我正在寻找一个更优雅的解决方案(如knockout.js observableArray).

例如，我有两个简单的观测值

val1 = ko.observable("input1");
val2 = ko.observable("input2");

我希望他们表现得像一个，所以当其中一个改变时，另一个也会改变。

我知道在通常情况下，最好只使用一个可观察的并将其绑定到几个dom元素。但就我而言，这些可观察物存在于不同的模板和对象中，因此它们不能是一个变量。

目前，我订阅一个可观察到的订阅，反之亦然：

val1.subscribe(function(v) {
    val2(v);
});
val2.subscribe(function(v) {
    val1(v);
});

但是，当您更改一个可观察值时，它会更新第二个，但会引起连锁反应，并无限期地更新第一个。

我如何在两个单独的可观察对象之间建立双向绑定，以在修改另一个对象时设置一个对象的值而不会导致无限循环？

您如何在响应式网站布局上使用Google Adsense响应式块进行操作？让我们考虑一下这种简单的情况（用引导程序编写）：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">Menu</div>
    <div class="col-sm-8 col-md-6">Content</div>
    <div class="col-md-3 hidden-sm hidden-xs">Column with Adsense</div>
  </div>
</div>

因此，对于大屏幕，我们有3列布局，对于小屏幕只有2列。右列不是很重要，因此我们将其隐藏，它包括adsense响应块，我们也将其隐藏。

如果我们在小屏幕上打开此页面，则会收到错误消息TagError: adsbygoogle.push() error: No slot size for availableWidth=0。如何避免这种情况？

理想情况下，如果窗口大小发生变化（在小屏幕上打开然后放大以使第三列变为可见，则应该在出现的列中触发adsense初始化），我想重新初始化adsense块，但是我想现在不可能。

我试图将adsense放到固定大小的容器中（该容器位于hidden-xs块中），它不起作用，无论如何都会出现错误。

我还尝试将响应类添加到中，<ins class="adsbygoogle hidden-xs">...</ins>但它也不能消除错误。

我在打印 html 页面时遇到了许多问题。我花了一些时间并尝试了不同的解决方案，但都没有奏效。

http://jsfiddle.net/kasheftin/vj7hr1cg/1/ - 这是我想打印的表格。我尽可能地简化了它。它不适合一页，目标是避免在行内容内分页。

此外，我希望在每个打印页面的底部都有一些自定义文本，例如“第 1 页，共 10 页”。

这是当前的结果：

如我们所见，最后一个单元格不适合页面，它没有底部边框，页码打印为 1/5 而不是 css 中指定的“1 of 5”。

这是我到目前为止尝试过的：

具有 rowspan 的每一行都有-primary类名。除了在这些行之前的任何地方都避免分页：

.b-rtable__row, .b-rtable__cell {
  page-break-inside: avoid !important;
}
.b-rtable__row {
  page-break-before: avoid !important;
  page-break-after: avoid !important;
}
.b-rtable__row.-primary {
  page-break-before: auto !important;
}

将每个单元格内容包装到.b-rtable__containerdiv 中，该 div 占据所有单元格并具有分页符内避免：

.b-rtable__row { 
  height: 1px; // Fix for 100% height;
}
.b-rtable__cell {
  height: inherit;
}
.b-rtable__container {
  width: 100%;
  height: 100%;
  page-break-inside: avoid !important;
  position: relative; // …

我有一个实体（图像），它具有如下计算属性（图像路径）：

@Entity()
export class Image extends BaseEntity {
  @PrimaryGeneratedColumn()
  @IsInt()
  id: number

  @Column({ type: 'varchar', length: 255, unique: true })
  @IsString()
  @IsNotEmpty()
  uid: string

  protected mainPath: string

  @AfterLoad()
  @AfterInsert()
  @AfterUpdate()
  generateMainPath(): void {
    this.mainPath = Math.floor(this.id / 10000) + '/' + Math.floor(this.id / 100) + '/' + this.uid
  }
}

我使用mainPath在后端文件系统中存储图像，并将其发送到前端构建img src路径。mainPath成功生成并发送给客户端。

问题在于前端使用 swagger (nswag openapi2tsclient) 生成的基于 openApi 模式构建的打字稿文件，由 Nest.JS 生成。生成的文件中没有接口mainPath属性。IImage是否可以以某种方式声明它，以便在客户端上定义它并填充 ajax 响应提供的值？

PS1。尝试装饰mainPath-@ApiProperty({ type: String })它没有帮助。

PS2。尝试使用@Column({ type: …

我无法使用 axios 捕获错误响应。怎么做？我使用类似的东西：

axios
  .post(...)
  .then(response => {
    console.log('Success: ', response)
  }).catch(error => {
    console.log('Error: ', error)
  })

我看到 ajax 请求的结果有 400 个状态代码，响应正文看起来像{someField:["This field may not be blank"]}（Django 后端）。没关系，我已经准备好在 catch 处理程序中处理这些错误了。

但是他们会转到成功处理程序。为什么这样？我在控制台中看到以下输出：

Success: Error: Request failed with status code 400
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)

成功处理程序接收 axios 错误对象作为结果。为什么会这样，下一步该怎么做？此错误对象不包含任何有用的信息。

更新。实际上，错误对象确实包含有用的信息，它内部包含响应对象。所以我们可以使用：

axios
  .post(...)
  .then(response => {
    if (response && response.response) {
      console.log('This is also an error', response.response.status)
    } else {
      console.log('Success: ', response)
    }
  }).catch(error => …

这是我为了调查 vue3 中列表的不必要的节点重新渲染而进行的一个小测试（vue2 具有相同的行为）： https: //kasheftin.github.io/vue3-rerender/。这是源代码： https: //github.com/Kasheftin/vue3-rerender/tree/master。

我试图理解为什么 vue 在某些情况下会重新渲染 v-for 中已经渲染的节点。我知道（并将在下面提供）一些避免重新渲染的技术，但对我来说，理解该理论至关重要。

对于测试，我添加了一个虚拟 v-test 指令，该指令仅在触发 Mount/beforeUnmount 挂钩时记录。

测试1

<div v-for="i in n" :key="i">
  <div>{{ i }}</div>
  <div v-test="log2">{{ log(i) }}</div>
</div>

结果：当n增加时，所有节点都重新渲染。为什么？如何避免这种情况？

测试2

Test2.vue:
<RerenderNumber v-for="i in n" :key="i" :i="i" />

RerenderNumber.vue:
<template>
  <div v-test="log2">{{ log() }}</div>
</template>

结果：工作正常。将内部内容从 test1 移动到单独的组件可以解决此问题。为什么？

测试3

<RerenderObject v-for="i in n" :key="i" :test="{ i: { i: { i } } }" />

结果：不必要的重新渲染。似乎不允许在将对象发送到某个子组件之前在循环中动态构造对象，可能是因为{} != {}在 JavaScript 中。

测试4

<template>
  <RerenderNumberStore …

node_modules今天更新（Vue 到 v3.3）后我开始收到这些错误。

使用的是 Vue 3.3、WebPack（不是 Vite）和 VS Code Volar。工程量巨大。

每个*.vue带有.<script setup lang="ts">​ import { defineProps, defineEmits } from 'vue'以前工作得很好，现在仍然可以编译并工作得很好。埃斯林特也顺利通过。

但现在 VS Code在每个文件中都会突出显示导入的defineProps和。defineEmits错误是：

Import declaration conflicts with local declaration of 'defineProps'.ts(2440)
(alias) function defineProps<PropNames extends string = string>(props: PropNames[]): { [K in keyof Readonly<{ [key in PropNames]?: any; }>]: Readonly<{ [key in PropNames]?: any; }>[K]; } (+2 overloads)
import defineProps
const defineProps: {
    <PropNames extends string = string>(props: PropNames[]): { …

我知道--ignore-existing选择权，想知道是否有些不同。

我的情况是：我有一个带有大量用户上传图片的Web服务器。现在大约2TB。通常，这些文件根本不会被修改。我使用rsync并将其备份到其他服务器。

但是，如果某些文件损坏了怎么办？假设文件的一半消失了。它将被复制到备份并覆盖以前的正确文件，因此备份也将损坏。

我可以用--ignore-existing。但是，如果某些文件仍被更改怎么办（这很少，但是可能）。使用此选项，备份将没有此新文件。

如果文件更改，我希望备份所有版本。可能吗？也就是说：如果rsync定义该文件已存在，则它将现有的旧文件移至某个文件，../previous-TIMESTAMP/oldFileHere然后将新文件放在旧文件的位置。

有没有办法做到这一点？

我使用不同的vuetify组件,例如v-menu.它有一个这样的模板:

<v-menu>
  <a slot="activator">menu</a>
  <v-list>
    <v-list-tile>Menu Entry 1</v-list-tile>
    <v-list-tile>Menu Entry 2</v-list-tile>
  </v-list>
</v-menu>

假设我想在它周围添加另一个包装器.这是我的特殊菜单组件,它有一些预定义的菜单选项.我希望它也有一个激活器插槽.最后应该以某种方式分配给原始的v菜单激活器插槽.可能吗？

例:

// index.vue: 
<template>
  <my-special-menu>
    <button>My special menu trigger</button>
  </my-special-menu>
</template>

// MySpecialMenu.vue
<template>
  <v-menu>
    <slot slot="activator"/> <-- I don't know how to write this line
    <v-list>...</v-list>
  </v-menu>
</template>

<slot slot="activator">是一个不正确的等式.目标是从父项(<button>..</button>在示例中)中提取内容,并slot="activator"在v-menu中使用它.

我可以这样写:

<v-menu>
  <a slot="activator"><slot/></a>
  ...
</v-menu>

但是这种情况下结果模板将是:

<div class="v-menu__activator">
  <a>
    <button>My special menu trigger</button>
  </a>
</div>

这不完全是我想要的.有可能在<a>这里摆脱包装吗？

更新:我们可以使用一种建筑,就像<template slot="activator"><slot name="activator"/></template>给一个大孩子扔一些槽.但是,如果我们有多个插槽并且我们想要将它们全部代理呢？这就像继承蚂蚁和v-bind="$attrs"插槽.目前有可能吗？

例如,<v-autocomplete> …

我在Raphael JS中有几个嵌套集,我想在photoshop中使用像图层一样.也就是说:集合中的对象可以有自己的变换,并且作为集合的位置,它们变得相对定位在集合中.并且set也可以拥有它自己的转换.

现在看来,当应用集合变换时,它只是分别对每个元素执行它,并且相对于页面具有绝对位置.

有了这些机制,我遇到了这样一个简单的问题:我有集合和矩形.然后我用尺度(0.5,0.5,0,0)调整矩形的大小; 然后我想拖动整个集合.我用set.translate(x,y)执行拖动.结果我得到的矩形比其他非缩放项目慢两倍.

var rdr = this;
this.paper = Raphael(0,0,1000,1000);
this.set = this.paper.set();
this.set.push(this.paper.rect(0,0,100,100)); // non-scaled rectangle
this.set.push(this.paper.rect(0,0,100,100).scale(0.5,0.5,0,0)); // scaled rectangle
$("body").bind("mousedown.RDR",function(e) {
  var ox = e.pageX;
  var oy = e.pageY;
  $("body").bind("mousemove.RDR",function(e) {
    rdr.set.translate(e.pageX-ox,e.pageY-oy);
    ox = e.pageX;
    oy = e.pageY;
  }).bind("mouseup.RDR",function() {
    $("body").unbind("mouseup.RDR").unbind("mousemove.RDR");
  });
});

我应该如何更正此代码以使我的矩形以相同的速度移动？

从理论上讲,我需要同时移动一组对象是一种控制变换顺序的方法.我还没有找到内置的解决方案,所以有一点hack插入已经应用于元素的集合"BEFORE"转换的转换:

Raphael.el.translateBefore = function(x,y) {
  var matrix = this.matrix;
  var transform = matrix.toTransformString();
  transform = ("t"+x.toString()+","+y.toString()) + "," + transform;
  this.transform(transform);
  return this;
}

this.paper = Raphael(this.containerId,this.paperWidth,this.paperHeight);
// ????????? ????? ??? raphael.set …

最近，我不得不编写奇怪的代码。我不确定，也许我正在重新发明轮子。

有没有简单的方法可以将中间件放入Promise链中？

例如，假设我们有一些可能axios.get('/users')。我们想对结果做点什么，然后再做点其他事情。假设这些动作位于应用程序的不同部分，并且我们不能将它们组合为一个功能。甚至更多，其中一些只是同步存储更新（并且不返回任何内容），而其他可能返回promise。

一个人可以写

axios
  .get('/users')
  .then((result) => {
    doSomething(result)
  })
  .then((result) => {
    doSomethingElse(result)
  })

这将不起作用，因为第一个then不会返回承诺，因此第二个then不会收到结果。正确的代码（用于没有承诺的同步操作）是：

axios
  .get('/users')
  .then((result) => new Promise((resolve, reject) => {
    doSomething(result)
    resolve(result)
  }))
  .then(result) => new Promise((resolve, reject) => {
    doSomethingElse(result)
    resolve(result)
  })
  ...etc...

但是我不喜欢这样。我一个人吗？我想要类似的东西：

axios
  .get('/users')
  .thenMiddleware(doSomething)
  .then((result) => {
    doSomethingElse()
  })

这意味着我们要doSomething使用的结果运行，get('/users')然后，如果没有错误，我们要再次使用下一个结果调用下一个链函数get('/users')。

关于错误：只有在操作返回一个承诺并且该承诺被拒绝的情况下，我才会考虑错误。

有道理吗？

那就是我写的函数：

const promiseMiddleware = (target) => function(...args) {
  return new Promise((resolve, reject) => {
    if (typeof …