Dịch phần 1-6: Bindings (sveltevietnam#78)

Author: sorae42

content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md

@@ -1,16 +1,16 @@
 ---
-title: Text inputs
+title: Input văn bản
 ---
 
-As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+Có một luật chung là dòng dữ liệu trong Svelte chạy _từ trên xuống_ — component cha có thể đặt thuộc tính vào component con, và một component có thể đặt thuộc tính vào một phần tử, nhưng ngược lại thì không.
 
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+Đôi khi phá luật sẽ có ích hơn. Trong trường hợp của phần tử `<input>` trong component này — ta _có thể_ thêm một hàm xử lý sự kiện `on:input` để thay đổi giá trị của `name` thành `event.target.value`, nhưng nó nhìn có vẻ... dài dòng. Ta sẽ thấy điều này sẽ trở nên tệ hơn cho những phần tử khác trong form.
 
-Instead, we can use the `bind:value` directive:
+Thay vào đó, ta có thể dùng chỉ thị `bind:value`:
 
 ```svelte
 /// file: App.svelte
 <input +++bind:+++value={name}>
 ```
 
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
+Điều này có nghĩa là khi thay đổi giá trị của `name` sẽ làm thay đổi giá trị của ô nhập, mà thay đổi giá trị trong ô nhập cũng sẽ cập nhật `name`.

content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md

@@ -1,10 +1,10 @@
 ---
-title: Numeric inputs
+title: Input số
 ---
 
-In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+Trong DOM, mọi thứ sẽ là dải kí tự. Điều này sẽ không giúp gì cho bạn khi bạn phải làm việc với những ô nhập số — `type="number"` và `type="range"` — tức là bạn phải nhớ chuyển kiểu cho giá trị của `input.value` trước khi sử dụng nó.
 
-With `bind:value`, Svelte takes care of it for you:
+Với `bind:value`, Svelte sẽ giúp bạn làm điều này:
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

@@ -1,8 +1,8 @@
 ---
-title: Checkbox inputs
+title: Input đánh dấu
 ---
 
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+Các ô đánh dấu được sử dụng cho việc bật tắt các trạng thái. Thay vì bind nó vào `input.value`, ta bind nó với `input.checked`:
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/app-a/src/lib/App.svelte

@@ -4,18 +4,16 @@
 
 <label>
 	<input type="checkbox" checked={yes} />
-	Yes! Send me regular email spam
+	Vâng! Gửi tôi email spam thường xuyên
 </label>
 
 {#if yes}
 	<p>
-		Thank you. We will bombard your inbox and sell
-		your personal details.
+		Cảm ơn! Chúng tôi sẽ gửi hàng tá email cho bạn và bán thông tin cá nhân của bạn.
 	</p>
 {:else}
 	<p>
-		You must opt in to continue. If you're not
-		paying, you're the product.
+		Bạn phải tham gia để tiếp tục. Nếu bạn không trả tiền, thì bạn là sản phẩm.
 	</p>
 {/if}
 

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/app-b/src/lib/App.svelte

@@ -4,18 +4,16 @@
 
 <label>
 	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
+	Vâng! Gửi tôi email spam thường xuyên
 </label>
 
 {#if yes}
 	<p>
-		Thank you. We will bombard your inbox and sell
-		your personal details.
+		Cảm ơn! Chúng tôi sẽ gửi hàng tá email cho bạn và bán thông tin cá nhân của bạn.
 	</p>
 {:else}
 	<p>
-		You must opt in to continue. If you're not
-		paying, you're the product.
+		Bạn phải tham gia để tiếp tục. Nếu bạn không trả tiền, thì bạn là sản phẩm.
 	</p>
 {/if}
 

content/tutorial/01-svelte/06-bindings/04-select-bindings/README.md

@@ -1,8 +1,8 @@
 ---
-title: Select bindings
+title: Bind select
 ---
 
-We can also use `bind:value` with `<select>` elements:
+Ta cũng có thể dùng `bind:value` cho phần tử `<select>`:
 
 ```svelte
 /// file: App.svelte
@@ -12,6 +12,6 @@ We can also use `bind:value` with `<select>` elements:
 >
 ```
 
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+Để ý rằng giá trị của `<option>` là đối tượng thay vì là dải kí tự. Svelte không quan tâm đâu.
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> Bời vì ta chưa đặt giá trị đầu cho `selected`, phép bind sẽ tự đặt nó thành giá trị mặc định (giá trị đầu tiên trong danh sách). Nhưng bạn phải cẩn trọng — cho đến khi phép bind được khởi chạy, `selected` sẽ vẫn là _undefined_, nên ta không thể lấy giá trị một cách mù quáng, v.d dùng `selected.id` trong template.

content/tutorial/01-svelte/06-bindings/04-select-bindings/app-a/src/lib/App.svelte

@@ -2,15 +2,15 @@
 	let questions = [
 		{
 			id: 1,
-			text: `Where did you go to school?`
+			text: `Bạn học ở trường gì?`
 		},
 		{
 			id: 2,
-			text: `What is your mother's name?`
+			text: `Tên của cha hoặc mẹ bạn?`
 		},
 		{
 			id: 3,
-			text: `What is another personal fact that an attacker could easily find with Google?`
+			text: `Bạn có một sự thật nào mà những kẻ tấn công có thể dễ dàng tìm kiếm được trên mạng?`
 		}
 	];
 
@@ -20,12 +20,12 @@
 
 	function handleSubmit() {
 		alert(
-			`answered question ${selected.id} (${selected.text}) with "${answer}"`
+			`Câu trả lời #${selected.id} (${selected.text}) là "${answer}"`
 		);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Câu hỏi không bảo mật</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<select
@@ -47,7 +47,7 @@
 </form>
 
 <p>
-	selected question {selected
+	đã chọn câu hỏi #{selected
 		? selected.id
 		: '[waiting...]'}
 </p>

content/tutorial/01-svelte/06-bindings/04-select-bindings/app-b/src/lib/App.svelte

@@ -2,15 +2,15 @@
 	let questions = [
 		{
 			id: 1,
-			text: `Where did you go to school?`
+			text: `Bạn học ở trường gì?`
 		},
 		{
 			id: 2,
-			text: `What is your mother's name?`
+			text: `Tên của cha hoặc mẹ bạn?`
 		},
 		{
 			id: 3,
-			text: `What is another personal fact that an attacker could easily find with Google?`
+			text: `Bạn có một sự thật nào mà những kẻ tấn công có thể dễ dàng tìm kiếm được trên mạng?`
 		}
 	];
 
@@ -20,12 +20,12 @@
 
 	function handleSubmit() {
 		alert(
-			`answered question ${selected.id} (${selected.text}) with "${answer}"`
+			`Câu trả lời #${selected.id} (${selected.text}) là "${answer}"`
 		);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Câu hỏi không bảo mật</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<select
@@ -47,7 +47,7 @@
 </form>
 
 <p>
-	selected question {selected
+	đã chọn câu hỏi #{selected
 		? selected.id
 		: '[waiting...]'}
 </p>

content/tutorial/01-svelte/06-bindings/05-group-inputs/README.md

@@ -1,10 +1,10 @@
 ---
-title: Group inputs
+title: Nhóm input
 ---
 
-If you have multiple `type="radio"` or `type="checkbox"` inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+Nếu bạn có nhiều ô `type="radio"` hoặc `type="checkbox"` mà liên quan đến cùng một giá trị, bạn có thể dùng `bind:group` cùng với thuộc tính `value`. Các ô đánh dấu _(radio input)_ trong cùng một nhóm sẽ loại trừ lẫn nhau (chỉ được chọn một); ô lựa chọn _(checkbox input)_ trong cùng một nhóm sẽ phân thành một mảng nhiều giá trị.
 
-Add `bind:group={scoops}` to the radio inputs...
+Hãy thêm `bind:group={scoops}` vào các ô đánh dấu...
 
 ```svelte
 /// file: App.svelte
@@ -16,7 +16,7 @@ Add `bind:group={scoops}` to the radio inputs...
 />
 ```
 
-...and `bind:group={flavours}` to the checkbox inputs:
+...và thêm `bind:group={flavours}` vào các ô lựa chọn:
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/06-bindings/05-group-inputs/app-a/src/lib/App.svelte

@@ -5,7 +5,7 @@
 	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
 </script>
 
-<h2>Size</h2>
+<h2>Kích cỡ</h2>
 
 {#each [1, 2, 3] as number}
 	<label>
@@ -15,13 +15,13 @@
 			value={number}
 		/>
 
-		{number} {number === 1 ? 'scoop' : 'scoops'}
+		{number} muỗng
 	</label>
 {/each}
 
-<h2>Flavours</h2>
+<h2>Hương vị</h2>
 
-{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
 	<label>
 		<input
 			type="checkbox"
@@ -34,12 +34,11 @@
 {/each}
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Hãy chọn một hoặc nhiều hương vị</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Không thể đặt hương vị nhiều hơn muỗng kem!</p>
 {:else}
 	<p>
-		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
-		of {formatter.format(flavours)}
+		Bạn đã đặt {scoops} muỗng {formatter.format(flavours)}
 	</p>
 {/if}

content/tutorial/01-svelte/06-bindings/05-group-inputs/app-b/src/lib/App.svelte

@@ -2,10 +2,10 @@
 	let scoops = 1;
 	let flavours = [];
 
-	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+	const formatter = new Intl.ListFormat('vi', { style: 'long', type: 'conjunction' });
 </script>
 
-<h2>Size</h2>
+<h2>Kích cỡ</h2>
 
 {#each [1, 2, 3] as number}
 	<label>
@@ -16,13 +16,13 @@
 			bind:group={scoops}
 		/>
 
-		{number} {number === 1 ? 'scoop' : 'scoops'}
+		{number} muỗng
 	</label>
 {/each}
 
-<h2>Flavours</h2>
+<h2>Hương vị</h2>
 
-{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
 	<label>
 		<input
 			type="checkbox"
@@ -36,12 +36,11 @@
 {/each}
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Hãy chọn một hoặc nhiều hương vị</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Không thể đặt hương vị nhiều hơn muỗng kem!</p>
 {:else}
 	<p>
-		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
-		of {formatter.format(flavours)}
+		Bạn đã đặt {scoops} muỗng {formatter.format(flavours)}
 	</p>
 {/if}

content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/README.md

@@ -1,22 +1,22 @@
 ---
-title: Select multiple
+title: Chọn nhiều trong select
 ---
 
-A `<select>` element can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+Một phần tử `<select>` có thể có thuộc tính `multiple`, tức là nó sẽ phân ra thành một mảng thay vì chỉ có chọn một giá trị.
 
-Replace the checkboxes with a `<select multiple>`:
+Thay các ô đánh dấu với `<select multiple>`:
 
 ```svelte
 /// file: App.svelte
-<h2>Flavours</h2>
+<h2>Hương vị</h2>
 
 +++<select multiple bind:value={flavours}>+++
-	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+	{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
 +++		<option>{flavour}</option>+++
 	{/each}
 +++</select>+++
 ```
 
-Note that we're able to omit the `value` attribute on the `<option>`, since the value is identical to the element's contents.
+Để ý rằng ta có thể bỏ thuộc tính `value` trên `<option>`, vì các giá trị giống với nội dung các phần tử.
 
-> Press and hold the `control` key (or the `command` key on MacOS) to select multiple options.
+> Bấm giữ phím `Control` (hoặc `command` trên macOS) để có thể chọn nhiều lựa chọn.

content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/app-b/src/lib/App.svelte

@@ -2,10 +2,10 @@
 	let scoops = 1;
 	let flavours = [];
 
-	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+	const formatter = new Intl.ListFormat('vi', { style: 'long', type: 'conjunction' });
 </script>
 
-<h2>Size</h2>
+<h2>Kích cỡ</h2>
 
 {#each [1, 2, 3] as number}
 	<label>
@@ -16,25 +16,24 @@
 			bind:group={scoops}
 		/>
 
-		{number} {number === 1 ? 'scoop' : 'scoops'}
+		{number} muỗng
 	</label>
 {/each}
 
-<h2>Flavours</h2>
+<h2>Hương vị</h2>
 
 <select multiple bind:value={flavours}>
-	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+	{#each ['bánh quy và kem', 'socola bạc hà', 'ngũ quả mâm xôi'] as flavour}
 		<option>{flavour}</option>
 	{/each}
 </select>
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Hãy chọn một hoặc nhiều hương vị</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Không thể đặt hương vị nhiều hơn muỗng kem!</p>
 {:else}
 	<p>
-		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
-		of {formatter.format(flavours)}
+		Bạn đã đặt {scoops} muỗng {formatter.format(flavours)}
 	</p>
 {/if}